2

クリックでドロップダウンしたいドロップダウンメニューを作成し、もう一度クリックすると元に戻ります。これは私が使用したトグルで完全に機能しますが、問題はドロップダウン後にリンクが実行されないことです。

$（function（）{

    $("#nav_menu-2 ul.menu ul").css({ display: 'none' });


    $("#nav_menu-2 ul.menu #testbutton").toggle(function() {


        $(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 300 );
    }, function(){

        $(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 300 );
    });

});

だから私の考えは、メニューがドロップした後、リンクを実行する代わりに、クリックすると元に戻るということです。しかし、私はjavascript / jQueryにまったく慣れていないので、他にどのようなオプションがあるのか​​わかりません。何か案は？

4

2 に答える 2

2

これは、 toggle()の既知の副作用です。ドキュメントには次のように記載されています。

実装はイベントでも呼び出すため、要素で が呼び出された.preventDefault()場合、リンクはたどられず、ボタンはクリックされません。.toggle()

これを回避するには、clickの代わりににバインドする必要がありtoggleます。Andrew が言うように、slideToggle()clickを使用して、イベントから同じ動作を取得できます。

于 2012-08-09T12:46:14.680 に答える
2

代わりに、メニューを開くボタンのクリック イベントにバインドされたslideToggleを使用します。

$("#nav_menu-2 ul.menu #testbutton").click(function() {
  $('ul.sub-menu').slideToggle();
});

メニューの構成方法によっては、セレクターを少し変更する必要がある場合があります。

于 2012-08-09T12:44:18.223 に答える