Question

我今天使用jQuery slideDown()和slideUp()方法制作了一个简单的手风琴菜单。示例代码：

<h1>the header</h1>
<div class='thechild'>
the content
</div>

$(function(){

    $('h1').click(function(){
        var next = $(this).next();
        if (next.is(':visible'))
        {
            next.stop().slideUp();
        }
        else
        {
            next.stop().slideDown();
        }             
        return false;
    });

});

这很有效，但是如果您在动画完成之前再次点击其中一个<h1>，则可以中断slideUp()或slideDown()事件。似乎会发生的是，第二次点击时，slideUp()将高度调零，但如果向下滑动，它只会向下滑动到其最后一个最大高度 - 即高度.thechild是你最后一次通过点击打断动画。

我需要的是，根据需要一次单击slideUp或slideDown .thechild，然后再次单击以停止动画（如果正在运行）并向上滑动.thechild。随后的第三次单击应该向下滑动.thechild到它的全高，而不是在点击＃2时中断时的高度。希望一切都有道理:)

我确信我曾经遇到过这个问题并以某种方式解决了它，但不记得（或谷歌）我提出的解决方案。这仅仅是这些幻灯片方法的限制，并且是我自己的animate()调用的解决方法，还有一些更高的功能吗？

我尝试过你可以传递给.stop()的各种布尔，但无济于事。必须有一些我想念的简单的东西，任何人都可以启发我吗？

jsfiddle here：http://jsfiddle.net/cY6kX/

要重新创建，请多次双击<h1>并观察会发生什么，然后再点击几次以查看它将如何中断，直到您重新加载页面。

任何指针都非常赞赏

Answer 1

将true, true添加到停靠点以完整地完成动画：

$(function(){

    $('h1').click(function(){
        var next = $(this).next();
        if (next.is(':visible'))
        {
            next.stop(true, true).slideUp();
        }
        else
        {
            next.stop(true, true).slideDown();
        }             
        return false;
    });

});

小提琴：http://jsfiddle.net/maniator/cY6kX/2/

Answer 2

将true添加到停止方法。例如，stop(true,true)

重复点击后jQuery 1.6.2 slideUp（）和slideDown（）高度问题

2 个答案: