1

我想要的很简单：

我有一个有背景的容器。容器内部是触发器和隐藏框，如下所示：

<div id="container">

<span id="box-1">Open 1</span> <span id="box-2">Open 2</span> <span id="box-3">Open 3</span> <span id="box-4">Open 4</span> <span id="box-5">Open 5</span> 

<div class="box box-1">Hi! I'm Box 1</div>
<div class="box box-2">Hi! I'm Box 2</div>
<div class="box box-3">Hi! I'm Box 3</div>
<div class="box box-4">Hi! I'm Box 4</div>
<div class="box box-5">Hi! I'm Box 5</div>

</div>

单击触发器后，目标框会向下滑动。如果一个盒子已经打开，它会向上滑动，新的目标盒子会向下滑动。我有这个在网站的不同部分工作，但在 jsfiddle 中共享有点复杂。我无法正常工作的简单版本在这里：

jsFiddle：slideUp 和 slideDown 问题

似乎 slideDown 函数在 slideUp 完成之前就开始了。我已经将 slideDown 移到了 slideUp 回调之外，并且得到了相同的反应。我已经处理了持续时间和延迟，但它仍然存在同样的问题。

- - - 编辑 - - -

我应该注意，我的目标是让容器在再次展开之前完全折叠。

4

3 回答 3

8

这是因为您需要在再次向下滑动之前隐藏（）

$('.box').not(boxItem).slideUp(function(){
    $('.box'+boxItem).hide().slideDown();
});

http://jsfiddle.net/dYMx8/

于 2012-12-10T22:47:01.747 回答
3

这个问题已有6个月大了，但我找到了问题的答案。就是 using$('.box').not(boxItem).slideUp(function()将调用 slideUp 函数 4 次，因为还有 4 个其他 div 具有“box”类。我们只希望它被调用一次，因为只有一个 div 可以向上滑动。您应该跟踪当前打开的框，并将其用作选择器而不是“.box”。

于 2013-06-16T00:34:32.720 回答
0

尝试停止动画：

$('.box').not(boxItem).stop(true, true).slideUp(function(){
    $('.box'+boxItem).slideDown();
});

通过true, true会清空动画队列，让动画“跳到最后”

小提琴

http://api.jquery.com/stop/

于 2012-12-10T22:38:58.943 回答