当前下拉菜单打开后不会关闭

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"); 
});