1

jqueryを使用したドロップダウンメニューのチュートリアルを見つけました。正常に動作しますが、少し調整したいと思います。ホバリングを使用してメニューを非表示にするのではなく、メニューを表示したのと同じボタンを使用して、もう一度押すとメニューを非表示にします。したがって、同じボタンでドロップダウンメニューの表示と非表示の両方を行う必要があります。私が使用しているスクリプト：

    $(document).ready(function () {

        $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

        $("ul.topnav li span").click(function () { //When trigger is clicked...

            //Following events are applied to the subnav itself (moving subnav up and down)
            $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

            $(this).parent().hover(function () {
            }, function () {
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
            });

            //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function () {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function () {    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
        });

    });

4

4 に答える 4

4

jQueryの.toggle() http://api.jquery.com/toggle/を使用します

$("#yourbutton").click(function() {
    $("#yourmenu").toggle();
});
于 2012-08-16T17:40:22.243 に答える
1

.togglejQueryのメソッドを使用すると、CSSルールを追加する手間を省くことができます。

$('#yourMenu').toggle()

これにより、表示されている場合は非表示になり、非表示の場合は表示されます。数値を追加するか'fast', 'slow'、パラメータとしてアニメーション化することができます。

于 2012-08-16T17:40:56.643 に答える
1

jQuery.toggle（）関数はあなたのためにこの仕事をします：

$("#button").on('click', function() {
    $("#menu").toggle();
});
于 2012-08-16T17:42:21.613 に答える
1

はい、toggleClassを使用できます。または、javascriptで独自のトグル関数を定義することもできます。クラスを切り替えたり、その他の必要な機能を実行したりできます。

function tog(elemen){ if(elemen.className == "show") { hide drpdwn elemen.className="hide"; } else { make dropdwn visible elemen.className="show"; } }

于 2012-08-16T17:46:08.513 に答える