1

これは私のスクリプトです。スライド メニューをアニメーション化できるようにトグルを使用しています。

    $("div.show-menu").click().toggle(
        function() {
            // first alternation
            $("#slideover").animate({
                right: "512px"
                }, 300);
            $(".menu-button").html('close menu');


        }, function() {
            // second alternation
            $("#slideover").animate({
                right: "0"
                }, 300);
            $(".menu-button").html('open menu');

    });

ページ上の2つの要素を使用して動作させるには、トグルが本当に必要ですが。たとえば、以下を参照してください...

<div class="show-menu one">open menu</div> // this is element one

<div class="show-menu two">open menu</div> // this is element two

要素1が最初にクリックされた場合、最初のクリックで要素2を使用してメニューを閉じることができるので、それが必要です。現在起こっていることは、メニューを閉じるために要素 2 を 2 回クリックする必要があるということです。逆の場合も同様です。

これがトグルの出番だと思います。どんな助けでも大歓迎です。

乾杯ジョシュ

4

2 に答える 2

1 
$('.show-menu').on('click', function () {

    //check the state of the .menu-button, if it's closed then run the open animation, if it's open then run the close animation
    if ($(".menu-button").html() == 'close menu') {
        $("#slideover").animate({
            right: "0"
        }, 300);
        $(".menu-button").html('open menu');
    } else {
        $("#slideover").animate({
            right: "512px"
        }, 300);
        $(".menu-button").html('close menu');
    }
});

.on()は jQuery 1.7 の新機能であり.bind()、このインスタンスでは置き換えられます。jQuery < 1.7 を使用している場合は、.bind().

于 2011-11-11T17:46:51.887 に答える
0

どうですか

$('.show-menu').on('click', function () {
    if ($("#slideover").css("right") == '512px') {
        $("#slideover").animate({
            right: "0"
        }, 300);
        $(".menu-button").html('open menu');

    } else {
        $("#slideover").animate({
            right: "512px"
        }, 300);
        $(".menu-button").html('close menu');
    }
});
于 2011-11-11T17:50:18.133 に答える