Question

jquery的slideDown()方法bug，快速单击溢出问题

自己做的练习，演示网址http://www.linkai.org/test/index.html
在紫色DIV没有打开的情况，快速连续点击按钮1和按钮2，会出现紫色DIV溢出问题，我想要的效果是只出现对应的紫色DIV，好比选项卡，就是一个可以关闭内容的选项卡

Answer 1

在你的slideDown和slideUp方法前加个stop()方法就行了，点击强制停止上一个未执行晚的动画

Answer 2

运行动画需要时间，快速点击的时候，在A没消失时，B运行了，会造成瞬间两个紫块显示。是吧？
slideUp(毫秒数或slow, fast, function(){ //执行完后再执行

……
});
试试改代码。

追问

804748423我的qq，我把源码给你，你帮我改下可以么

追答

$(".list ul li").each(function(i){
$(this).click(function(){
$(this).addClass("list_on").siblings().removeClass("list_on");
$(".box ul li").css("display", "none");
$(".box ul li:eq(" + i+ ")").slideDown();
});
});

追问

我们的效果不一样，我要的效果如下：
1：在紫色DIV没有显示出来的时候，第一次点击任意按钮，紫色DIV显示出来，slideDown()效果；
2：在紫色DIV显示出来后，点击其他的按钮，紫色DIV不用重新打开，而切换里面的内容就可以了；
3：一个按钮连续点击2次，紫色DIV可以收起来，slideUp效果；

追答

$(function(){
    $(".list ul li").each(function(i){
        $(this).click(function(){
            if($(".list ul li.list_on").size() == 0){
                $(this).addClass("list_on").siblings().removeClass("list_on");
                $(".box ul li:eq(" + i + ")").slideDown();
            }else{
                if($(this).hasClass("list_on")){
                    $(this).removeClass("list_on");
                    $(".box ul li:eq(" + i + ")").slideUp();
                }else{
                    $(this).addClass("list_on").siblings().removeClass("list_on");
                    $(".box ul li:eq(" + i + ")").css("display", "block").siblings().css("display", "none");
                }
            }
        });
    });    
});

追问

运行动画需要时间，快速点击的时候，在A没消失时，B运行了，会造成瞬间两个紫块显示 上面这段话是你回复我的，你给的代码，还是存在这个的bug。这个效果我自己能实现，我要的是解决slideDown()导致两个紫块显示方法

追答

你确定？经我测试，快速点击没发现有这种情况。

追问

我把你的js放进去，还是出现紫色DIV溢出问题，哎~~是我的html或者CSS跟你的不一样？
把你的源码文件压缩包发给我，上传上来，或者发我Q.Q.邮.箱.804748423百度不让打邮箱，我擦

追答

我没有什么特别的代码啊……CSS，copy自你的文件。

/* css copy自你的文件 */

/* 上面的js代码 */

按钮1
按钮2
按钮3
按钮4

1111111111
2222222222
3333333333
4444444444