5

4つのアイテムボタンがあるページがあります。ユーザーがこれらのボタンをクリックすると、コンテンツがスライドダウンします。

すでに表示されているコンテンツの場合は、このコンテンツを上にスライドしてから、適切なコンテンツを下にスライドする必要があります。

すべて正常に動作しますが、ユーザーがアイテムボタンの間をすばやくクリックすると、スライドが詰まり、他のスライドの上に表示され始めます。

次に例を示します。：http： //jsfiddle.net/7t6Eh/42/

ユーザーがアイテム間で「遅い」をクリックすると、すべて正常に機能します。

  • エラーを再現するには[アイテムボタン間で高速]をクリックします。

'.is（ "：visible"）'を使用しようとしましたが、同じ結果が得られました。

誰かが私を助けることができますか？

コード

var active = 0;

    $("#item1").click(function(){

        if (active == 0){

            $("#ContentList1").stop().slideToggle(function() {
                active = 1;
            });

        } else {

            if (active != 1){
                $("#ContentList" + active).stop().slideToggle(function() {

                    $("#ContentList1").stop().slideToggle(function() {
                        active = 1;
                    });

                });
            }
        }
    });

    $("#item2").click(function(){

        if (active == 0){

            $("#ContentList2").stop().slideToggle(function() {
                active = 2;
            });

        } else {

            if (active != 2){
                $("#ContentList" + active).stop().slideToggle(function() {

                    $("#ContentList2").stop().slideToggle(function() {
                        active = 2;
                    });

                });
            }
        }
    });

    $("#item3").click(function(){

        if (active == 0){

            $("#ContentList3").stop().slideToggle(function() {
                active = 3;
            });

        } else {

            if (active != 3){
                $("#ContentList" + active).stop().slideToggle(function() {

                    $("#ContentList3").stop().slideToggle(function() {
                        active = 3;
                    });

                });
            }
        }
    });    

    $("#item4").click(function(){

        if (active == 0){

            $("#ContentList4").stop().slideToggle(function() {
                active = 4;
            });

        } else {

            if (active != 4){
                $("#ContentList" + active).stop().slideToggle(function() {

                    $("#ContentList4").stop().slideToggle(function() {
                        active = 4;
                    });

                });
            }
        }
    });
4

2 に答える 2

2

siblings()私は通常、「アクティブな」変数を使用してアクティブな div を保存するのではなく、隣接する div を選択してそれらを停止することを利用して、この種のことを行います。

$(document).ready(function(){
    $("#item1").click(function(){
        $('#' + $(this).attr('for'))
            .slideDown().siblings('div').stop().slideUp()
    });
    $("#item2").click(function(){
        $('#' + $(this).attr('for'))
            .slideDown().siblings('div').stop().slideUp()
    });
    $("#item3").click(function(){
        $('#' + $(this).attr('for'))
            .slideDown().siblings('div').stop().slideUp()
    });
    $("#item4").click(function(){
        $('#' + $(this).attr('for'))
            .slideDown().siblings('div').stop().slideUp()
    });
});

「for」属性 (またはその他の属性) を使用して、リンクが参照している div を指定できます。例えば：

<div id="item1" for="ContentList1" style="float: left; width: 50px; cursor: pointer;">Item1</div>

動作するフィドルの例: http://jsfiddle.net/7t6Eh/46/

追加: 開くアニメーションの前に閉じるアニメーションを実行する場合は、次のように jQuery deferred を使用できます。

$("#item1").click(function(){
    content = $('#' + $(this).attr('for'));
    $.when(content.siblings('div').stop().slideUp())
        .then(function () { content.slideDown() });
});

もちろん、4 つのクリック イベントすべてに適用されます。例: http://jsfiddle.net/7t6Eh/52/

于 2012-10-17T16:55:10.073 に答える
1

http://jsfiddle.net/7t6Eh/50/

これは、あなたが達成しようとしていることをするはずです。クリックされたリスト項目の位置を取得し、それに基づいて必要なコンテンツを表示します。他に説明が必要な場合はお知らせください

var active = -1;
$('.content').hide();
$('ul li').click(function() {
    var index = $(this).index('ul li');
    if( active == index) {
        // this item already active, do nothing
    } else {
        // show the content you want
        $('.content').stop().slideUp();
        $('.content').eq(index).slideDown()
    }
    active = index
})

</p>

于 2012-10-17T16:54:31.323 に答える