5

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

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

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

这是一个例子：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

我通常会利用选择相邻的 div 并停止它们来做这种事情siblings()，而不是使用“活动”变量来存储活动 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 回答