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

开盘后当前下拉列表不会关闭

2 个答案: