1

本当にシンプルなメニューを作成したいのですが、div "test"が非表示になっていて、div "trig"をクリックすると、testが表示されます。次に、もう一度trigをクリックすると、テストが非表示になります。最初のクリックで機能し、トリガーをもう一度クリックするとアニメーションが2回再生され、もう一度クリックすると3回再生されます。

私のコードは：

<div class="trig">trig</div>
<div class="test">test</div>

<script src="jquery.js"></script>
<script>
$(function () {

$('.test').hide();

function bis() { 
    $('.trig').click(function() { 
        var trig = $(this);
        var test = trig.next();
        test.show(300,function() {
            trig.click(function(){
                test.hide(300, function() { bis(); })
            ;});
        ;});
    });
};

bis();

});
</script>
4

2 に答える 2

2

関数が機能しているのは1回だけです。その後、トリガーをクリックすると、最初に$('.trig').click(function()が呼び出されてテストが表示され、その後、trig.click(function()のコールバックでshowが呼び出されて、テストがすぐに再び非表示になります。

この関数を使用してtoggle()要素を切り替えます。

$('.trig').click(function() { 
    var trig = $(this);
    var test = trig.next();
    test.toggle(300);
});

ドキュメント：http ：//api.jquery.com/toggle/

フィドル： http： //jsfiddle.net/suEg4/

于 2013-02-22T09:44:01.397 に答える
0

これは簡単なことです...以下のようにしてみてください...それはうまくいくでしょう...

フィドルの例： http： //jsfiddle.net/RYh7U/103/

 $('.test').toggle();
 $('.trig').click(function() { 
     $('.test').toggle("slow");
});
于 2013-02-22T09:47:32.957 に答える