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

发布于 2024-12-01 02:33:29 字数 1330 浏览 1 评论 0原文

我今天使用 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;
    });

});

这效果很好，但是如果您在动画完成之前再次单击

之一，则可能会中断 `slideUp()`或 `slideDown()` 事件。似乎会发生的是，当您第二次单击时，它会 `slideUp()` 到零高度，但是如果您向下滑动，它只会向下滑动到其上一个最大高度 - 即高度`.thechild` 是您最后一次通过单击中断动画的时间。

我需要的是根据需要单击一下以 SlideUp 或 SlideDown .thechild ，然后单击第二次以停止动画（如果正在运行）并向上滑动 .thechild 。随后的第三次单击应将 .thechild 滑下至其完整高度，而不是在单击 #2 时中断时的高度。希望一切都有意义:)

我确信我以前曾经遇到过这个问题并以某种方式解决了它，但不记得（或谷歌）我想出的解决方案。这是否只是这些幻灯片方法的限制，以及执行我自己的 animate() 调用并进一步计算高度的解决方法？

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

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

重新创建，双击

多次，观察会发生什么，然后再单击几次，看看它会如何像这样中断，直到您重新加载页面。

非常感谢任何指点

原文

I have a simple accordion menu I've put together today using the jQuery slideDown() and slideUp() methods.
Example code:

<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;
    });

});

This works great, however if you click on one of the <h1>'s once then again before the animation completes, you can break the slideUp() or slideDown() event.
What appears to happen is that the second time you click, it will slideUp() to zero height fine but if you are sliding down, it will only slide down to its last previous maximum height - i.e the height .thechild was at the last time you interrupted the animation by clicking.

What I need is for one click to slideUp or slideDown .thechild as appropriate, and a second click to stop the animation (if running) and slide .thechild up. A subsequent third click should slideDown .thechild to it's full height, not the height it was at when interrupted at click #2. Hope that all makes sense :)

I'm sure I once had this problem before and solved it somehow, but can't remember (or google) the solution I came up with. Is this just a limitation of those slide methods, and is the workaround to do my own animate() calls with some more working out for heights?

I've tried playing around with the various booleans you can pass into .stop(), but to no avail. There must be something simple I'm missing, can anyone enlighten me?

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

to recreate, double-click on the <h1> a bunch of times and watch what happens, then click a few more times to see how it will break like this until you reload the page.

Any pointers greatly appreciated

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

以往的大感动 2024-12-08 02:33:29

将 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;
    });

});

Fiddle: http ://jsfiddle.net/maniator/cY6kX/2/

Add true, true to the stops to complete the animation in full:

$(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;
    });

});

Fiddle: http://jsfiddle.net/maniator/cY6kX/2/

回复收藏 0 原文