如何將removeClass添加到jQuery中的選擇器

Question

我在頁面上有兩個菜單（如果需要，請參見下面的jsfiddle ...它具有響應能力，因此您需要最小化窗口）。 當前，當一個打開並單擊另一個時，它們都保持打開狀態。 我將如何編輯javascript，以便當一個打開時，另一個關閉？ 我知道我需要添加一個removeClass，但是我不確定如何實現它。 非常感謝您的幫助。

http://jsfiddle.net/Jq6sZ/

$(document).ready(function() {
    $('body').addClass('js');
    var $menu = $('#menu'),
        $menulink = $('.menu-link'),
        $menuTrigger = $('.has-subnav > a');

    $menulink.click(function(e) {
        e.preventDefault();
        $menulink.toggleClass('active');
        $menu.toggleClass('active');
    });

    $menuTrigger.click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.toggleClass('active').next('ul').toggleClass('active');
    });

});

$(document).ready(function() {
    $('body').addClass('js');
    var $menu = $('#menu2'),
        $menulink = $('.menu-link2'),
        $menuTrigger = $('.has-subnav > a');

    $menulink.click(function(e) {
        e.preventDefault();
        $menulink.toggleClass('active');
        $menu.toggleClass('active');
    });

    $menuTrigger.click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.toggleClass('active').next('ul').toggleClass('active');
    });
});

Answer 1

您可以檢查其他菜單hasClass具有active 。 例如，在menu-link click事件中，您將具有以下內容：

if($('.menu-link2').hasClass("active")){
    $('.menu-link2').trigger("click");
}

然后使用trigger來觸發另一個菜單上的click事件。

http://jsfiddle.net/Jq6sZ/1/

Answer 2

您的代碼可以更簡單，更短，您有2個docready語句，並且兩次將body類設置為'js'。 這可以縮短。 總體而言，您對HTML的布局方式有所限制，但是有一種方法：

$(document).ready(function() {
    $('body').addClass('js');

    var $menulink = $('.menu-link, .menu-link2'), 
        $menuTrigger = $('.has-subnav > a');

    $menulink.click(function(e) {
        var menu_to_toggle = $(this).next(); //which menu will this button toggle?
        e.preventDefault();
        $menulink.not($(this)).removeClass('active'); //remove active class from all menu links, but not this one
        $(this).toggleClass('active'); //toggle active class for this link
        $('.menu.active').not(menu_to_toggle).removeClass('active'); //remove active class from all menus, but not this one
        menu_to_toggle.toggleClass('active'); //toggle active class for the menu
    });

    $menuTrigger.click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.toggleClass('active').next('ul').toggleClass('active');
    });
});

看到這個小提琴演示

注意：腳本不會重新折疊子菜單。