删除类

Question

在我的下拉菜单中，当用户点击按钮时，它会添加一个类来显示下拉列表。

首先，它会移动类的所有实例。我的导航有几个按钮，因此删除该类将关闭其他打开的列表。

代码：

jQuery(".nav-js-trigger").each(function(){
    this.onclick = function() {
        // remove all instances of .show-nav
        jQuery('.show-nav').removeClass('show-nav');

        // show list
        jQuery(this).parent().toggleClass( "show-nav" );
    }
});

工作正常。唯一的问题是用户无法关闭列表，因为：

1. 首先删除所有类的实例。
2. 切换该类，它将始终添加该类，因为它只删除了所有实例...

如何正确切换菜单并仍然删除该类的所有实例？显然，我需要改变我的方法。

Answer 1

在删除所有类之前，您可以使用hasClass来检测状态：

jQuery(".nav-js-trigger").each(function(){
    this.onclick = function() {
        var hasClass;
        hasClass = jQuery(this).parent().hasClass( "show-nav" );
        // remove all instances of .show-nav
        jQuery('.show-nav').removeClass('show-nav');

        // show or toggle list
        if (hasClass === false) {
            jQuery(this).parent().addClass( "show-nav" );
        }
    }
});

Answer 2

使用not：

从第一个选择中删除当前元素

jQuery(".nav-js-trigger").on('click', function(){
        // remove all instances of .show-nav
        jQuery('.show-nav').not(this.parentNode).removeClass('show-nav');

        // show list
        jQuery(this).parent().toggleClass( "show-nav" );
    }
});

注意：我还清理了绑定点击处理程序的方式，因为each/onClick很笨拙。