2

我在一个页面上有两个菜单（如果需要，请参阅下面的 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');
    });
});
4

2 回答 2

0

You could check whether or not the other menu hasClass of active. For example, in your click event for menu-link you would have something like: 

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

Then use trigger to trigger a click event on the other menu.

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

于 2013-01-09T15:47:11.830 回答
0

您的代码可以更简单、更短，您有 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');
    });
});

看到这个小提琴演示

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

于 2013-01-09T16:09:53.297 回答