2

ページに 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

hasClassのその他のメニューかどうかを確認できますactive。たとえば、クリックイベントでは、menu-link次のようになります。

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

次に、を使用して他のメニューでイベントtriggerをトリガーします。click

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

于 2013-01-09T15:47:11.830 に答える
0

コードは非常に単純で短くすることができ、2つのdocreadyステートメントがあり、bodyクラスを「js」に2回設定します。これは短縮できます。全体として、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 に答える