jQuery 1.6.2 slideUp() 和 slideDown() 重复点击后的高度问题答案

【问题标题】：jQuery 1.6.2 slideUp() and slideDown() height problem after repeated clicksjQuery 1.6.2 slideUp() 和 slideDown() 重复点击后的高度问题
【发布时间】：2011-08-24 14:31:33
【问题描述】：

我今天使用 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 在最后您通过单击中断动画的时间。

我需要的是单击以适当地滑动或滑动.thechild，然后单击以停止动画（如果正在运行）并向上滑动.thechild。随后的第三次单击应该向下滑动.thechild 到它的全高，而不是在单击 #2 时中断的高度。希望一切都有意义:)

我确定我曾经遇到过这个问题并以某种方式解决了它，但不记得（或谷歌）我想出的解决方案。这只是这些滑动方法的限制吗？是我自己的animate() 调用的解决方法吗？

我尝试过使用可以传递给.stop() 的各种布尔值，但无济于事。我一定缺少一些简单的东西，有人可以启发我吗？

jsfiddle 在这里：http://jsfiddle.net/cY6kX/

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

非常感谢任何指针

【问题讨论】：

标签： jquery slidedown slideup

【解决方案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/

【讨论】：

我在停止时尝试了 (true)、(true, false) 和 (false, false)。如果我没有尝试（真的，真的），我的大脑一定很累 - 即使在阅读了 .stop() 的文档之后也是如此。感谢您指出显而易见的:)
@jammypeach 没问题 ^_^ 乐于助人:-D

【解决方案2】：

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

【讨论】：