切換一個div按鈕改變利潤率左屬性

我有一個<div class="lateral-menu">和一個按鈕切換一個div按鈕改變利潤率左屬性

<img class="responsive-icon" src="images/resposive-icon.svg"/>

，股利是220px寬和經銷商的高度。

的想法是切換橫向菜單的CSS屬性之一，而點擊.resposive圖標

似乎是我的代碼不能正常工作，有人可以定位我嗎？

HTML

<div class="lateral-menu"> 
<img class="responsive-icon" src="images/resposive-icon.svg"/>

CSS

.lateral-menu { 
height: auto; 
background-color: #262525; 
overflow: hidden; 
position: absolute; 
top: 50px; 
width: 220px; 
margin-left:-220px; 
}

JAVASCRIPT

$('.responsive-icon').click(function() { 
$(".lateral-menu").animate({ 
    marginLeft: '0px' 
}, 500); 
});

我試圖切換利潤率左從-220px爲0以允許它從出現左邊。一些建議？謝謝！

來源

2016-03-22 Eugenio

似乎完美的工作..看[小提琴]（https://jsfiddle.net/ey96a40y/）...在您的瀏覽器控制檯中的任何錯誤？ – Lal

看看這個例子，它可能會幫助你：http://jsfiddle.net/07dmh3gL/2/ – Lotus91

或是[this]（https://jsfiddle.net/ey96a40y/1/）你正在嘗試實現？ – Lal

您粘貼的代碼示例有幾個問題會導致它在沒有一些更改的情況下無法正常工作，但總體而言，此方法沒有任何問題。

如果HTML意味着是這樣的：

<div class="lateral-menu"></div> 
<img class="responsive-icon" src="images/resposive-icon.svg"/>

然後，你需要一個高度適用於這個例子中，在Lai's 2nd jsfiddle。

如果HTML意味着是這樣的：

<div class="lateral-menu"> 
    <img class="responsive-icon" src="images/resposive-icon.svg"/> 
</div>

那麼它應該是工作得很好假設你已經加載的jQuery在頁面上。我建議打開browser console to check for errors or warnings。

此外，您可能會發現使用left運氣比較好，因爲它是絕對定位就像這個例子：https://jsfiddle.net/okohrvoL/1/

編輯：

要再次使菜單崩潰，您可以在添加一個簡單的檢查回調函數：

$('.responsive-icon').click(function() { 
    var targetValue; 

    if ($('.lateral-menu').css('left') == "0px") { 
    targetValue = '-220px'; 
    } else { 
    targetValue = '0px'; 
    } 

    $(".lateral-menu").animate({ 
    left: targetValue 
    }, 500); 
});

工作示例這裏：https://jsfiddle.net/okohrvoL/2/

來源

2016-03-22 16:59:49

謝謝！該部分正在工作，我想要做的是，當我再次單擊相同的按鈕時，將其恢復到原始位置。到目前爲止，我只能顯示橫向菜單 – Eugenio

我已通過一種簡單的方法更新了答案，以便在下次點擊時關閉菜單。 –

真棒@JeremyBaker現在我明白它是如何工作的！謝謝朋友！ – Eugenio

切換一個div按鈕改變利潤率左屬性

回答

相關問題