切换单链路上的类？

Question

出于移动导航按钮的目的，我希望链接单击（显示菜单）添加活动类，然后，当您再次单击相同链接（折叠菜单）时，它将删除该类。

$(function() {  
    $(".nav-mobile").click(function () {
        $(".nav-mobile").removeClass("active");
        $(this).addClass("active");
    });
});

这会在点击时添加活动类，但在再次单击时不会删除它。

是否可以删除它？

Answer 1

您可以在jQuery中使用toggleClass()函数。它完全符合你的要求。

检查api doc：https://api.jquery.com/toggleClass/

Answer 2

请改用此代码：

$(function() {  
    $(".nav-mobile").click(function () {
        $(".nav-mobile").not(this).removeClass("active");
        $(this).toggleClass("active");
    });
});

Answer 3

试试这个

$(function() {
    $(".nav-mobile").click(function () {
        var $this = $(this);
        if( $this.hasClass('active')) {
            $this.removeClass('active');
        } else {
            $(".nav-mobile").removeClass("active");
            $this.addClass("active");
        }
    });
});