jQuery - toggleClass + slideToggle無法按預期工作

Question

我對學習HTML，CSS和JavaScript比較陌生。我正在創建一種測試網站，僅用於學習目的，並已開始潛入移動響應網站。

我有一個測試網站，其中隱藏了一個手機導航按鈕，用CSS媒體查詢來設置顯示屏以隱藏正常的導航菜單。我也有移動導航菜單的列表項。要顯示/隱藏此，我創建了一個.toggleClass() jQuery函數：

function clicktouchmenu() 
{ 
    $('#menuico').on('click touch', function() 
    { 
     var $mobmen = $(".mobilemenu"); 
     $mobmen.toggleClass('clicked'); 
    }); 
}; 

上述工作，但我想一個.slideToggle()增加了效果菜單。如果我在.toggleClass()下添加這個菜單有點奇怪，如果我點擊菜單圖標，沒有任何反應，但反覆點擊，它似乎啓動生命並開始工作上下滑動。

因爲我對此很新，所以我期望我完全做錯了，或者過於複雜，可能很簡單。

Answer 1

嘗試取出clicked類，並在mobilemenu像這樣只使用slideToggle()：

$('#menuico').on('click touch', function() 
{ 
    var $mobmen = $("#mobilemenu") 
    $mobmen.slideToggle(); 
}); 

我認爲問題是，如果clicked類切換菜單是否被顯示則與slideToggle()干擾。這是因爲slideToggle()的目的是使某些東西看起來像滑入和滑出視圖（即切換是否隱藏動畫）。所以你只需要一個或另一個，但slideToggle()顯然包括動畫。

我添加了一個小提琴，但它只是我不知道你的HTML和CSS是什麼樣的一個演示：

小提琴：https://jsfiddle.net/668mucca/3/

在jQuery的鏈接到該條目上slideToggle() docs for good measure：http://api.jquery.com/slidetoggle/