jquery - SlideToggle 和 Callback，我做错了什么还是这是一个错误？

Question

我有一个带有四个项目按钮的页面，当用户单击这些按钮时，内容应该向下滑动。

如果它已经是可见内容，则必须向上滑动该内容，然后向下滑动正确的内容。

一切正常，但如果用户在项目按钮之间快速单击，幻灯片就会卡住并开始出现在其他幻灯片之上。

这是一个例子: 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;
                    });

                });
            }
        }
    });

Answer 1

我通常会利用 siblings() 来选择相邻的 div 并停止它们，而不是使用“事件”var 来存储事件的 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>

​ 一个工作 fiddle 示例: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/