當前下拉菜單打開後不會關閉

Question

我有這個腳本可以在我的導航項下打開下拉菜單。

現在，當點擊導航項目時，下拉菜單將打開。當我再次單擊相同的項目時，它將不會關閉。

只有當我點擊另一個導航項以打開另一個下拉菜單時，才能關閉它。

當我單擊它時，如何獲取當前導航項目關閉，同時在單擊其他導航項目時保持它的功能關閉？

$("li.dropdown-control > a").click(function (event) { 
    event.preventDefault() 
     $('.dropped').removeClass('dropped'); 
     var nextSibling = $(this).next(); 
     nextSibling.toggleClass("dropped"); 
}); 

Answer 1

看你的代碼：

$('.dropped').removeClass('dropped'); 
    var nextSibling = $(this).next(); 
    nextSibling.toggleClass("dropped"); 

這將刪除所有dropped類（包括您剛纔點擊的一個，如果它已經掉了下來），然後將其重新添加到相同的元素。這就是爲什麼它似乎永遠不會關閉 - 你實際上關閉並立即再次打開它。

試試這個：

var nextSibling = $(this).next(); 
    nextSibling.toggleClass("dropped"); 
    $('.dropped').not(nextSibling).removeClass('dropped'); 

Answer 2

從您的代碼刪除$('.dropped').removeClass('dropped');線試試這個。 toggleClass表示如果未添加，則添加類;如果已添加，則刪除類。

現在，通過刪除$('.dropped').removeClass('dropped');toggleClass將刪除.dropped類

$("li.dropdown-control > a").click(function (event) { 
    event.preventDefault() 
     var nextSibling = $(this).next(); 
     nextSibling.toggleClass("dropped"); 
});