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

您可以检查active的其他菜单hasClass是否正确。例如，在menu-link的点击事件中，您会有类似的内容：

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

See this Fiddle for demo

注意：脚本不会重新折叠子菜单。

如何在jQuery中将removeClass添加到选择器

2 个答案: