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

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