Переключить класс на одиночную ссылку?

Для кнопки мобильной навигации я хочу, чтобы ссылка щелкнула (показать меню), чтобы добавить активный класс, а затем, когда вы снова щелкнете по той же ссылке (свернуть меню), она удалит класс.

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

Это добавляет активный класс при щелчке, но не удаляет его при повторном щелчке.

Можно ли его удалить?


toggle jquery removeclass
person user4630    schedule 20.02.2014    source источник
comment
кажется, что это бессмысленный сценарий. вы удалили класс и добавили его снова!   -  person Awlad Liton    schedule 20.02.2014
comment
Ссылка открывает меню, я хочу, чтобы класс указал, что меню открыто, изменив его цвет, затем вы снова нажимаете, чтобы закрыть его, и это не тот цвет, следовательно, не открывается.   -  person user4630    schedule 20.02.2014
comment
Вы добавляете его снова после удаления   -  person timo    schedule 20.02.2014
comment
С кодом все в порядке, у него несколько кнопок. Когда он нажимает кнопку 1, он добавляет класс к кнопке 1. Затем, когда он нажимает кнопку 2, он удаляет класс кнопки 1 и добавляет класс к кнопке 2. Проблема в том, что когда он снова нажимает кнопку 2, он хочет удалить класс кнопки 2, которая не работает.   -  person Karl-André Gagnon    schedule 20.02.2014

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете использовать функцию toggleClass() в jQuery. Он делает именно то, что вы хотите.

Проверьте документ API: https://api.jquery.com/toggleClass/

person Roberto Linares    schedule 20.02.2014
comment
Спасибо, это сработало идеально. Я пробовал переключить раньше, и это не сработало, как в этом примере. - person user4630; 20.02.2014

arrow_upward
1
arrow_downward

Вместо этого используйте этот код:

$(function() {  
    $(".nav-mobile").click(function () {
        $(".nav-mobile").not(this).removeClass("active");
        $(this).toggleClass("active");
    });
});
person Karl-André Gagnon    schedule 20.02.2014

arrow_upward
0
arrow_downward

Попробуй это

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