一个表单上的多个JQuery切换

我有一个表单，其中一些字段附带了扩展框。它看起来有点像这样（几次以上，略有变化）：

两个问题：

如果我双击或三次单击

.toggle

，则在其下方2-3

。展开\u me

divs toggle。显然，我当前的函数并不总是调用下一个

。expand\u me

，而是调用当前未设置动画的下一个。如何确保切换函数始终且仅针对下一个div，而不管其动画状态如何

我想通过将

.stop（）

添加到我的切换行，打破JQuery本机构建的动画队列，如：

$(this).nextAll(".expand_me").first().stop().toggle("blind",{},500);

因为我对#1有问题，所以无法测试它是否有效。如果没有，我如何确保双击div的新手不会遇到令人困惑的双重动画

---

如果只使用

.next（）

而不是

.nextAll（）.first（）

，则可以正常工作：

或者，如果使用标准的

.toggle（）

而不是jQuery UI中的扩展选项：

我不知道为什么会有区别，但浏览一下jQuery内部可能会有所启示。如果您在此处玩单键和双击游戏：

然后您将看到

.nextAll（）

列表排除了当前正在制作动画的元素，但我不知道为什么

在任何情况下，

.next（'.expand_me'）

都完全符合您的意图，因此我将继续前进。OTOH，

.next（）

和

.nextAll（）.first（）

之间的差异可能会困扰我好几天，希望有人能给我一个解释，让我安心

更新：如果您使用DOM检查器（例如WebKit的“inspect element”）观看动画，您将看到jQuery UI的扩展

。toggle

在动画期间将动画元素包装在一个额外的

中。因此，如果你说

.nextAll（'.expand\u me'）

它将找不到你想要的

.expand\u me

，因为它不再是兄弟姐妹：它将是临时兄弟姐妹的孩子。

.next（'.clear'）.next（'.expand_-me'）

将很方便地找不到任何内容，因为临时包装将阻止直接路径“this->.clear->.expand_-me”，并且单击处理程序在双击的第二次单击时不会执行任何操作

我可能应该直接进入jQuery UI源代码，找出奇怪的

.nextAll（）

行为。哦，好吧，至少我知道现在发生了什么

更新2:一个比所有这些

更好的方法。下一个
业务是明确地将链接绑定到切换面板：

<a data-panel="panel-1">
    <!--...-->
</a>
<!--...-->
<div id="panel-1" class="expand_me">
    <!--...-->
</div>

如果您使用的是较旧的jQuery，则可能必须使用
.attr（'data-panel'）
而不是
.data（'panel'）

示例：
如果只使用
.next（）
而不是
.nextAll（）.first（）
，则效果很好：


或者，如果使用标准的
.toggle（）
而不是jQuery UI中的扩展选项：


我不知道为什么会有区别，但浏览一下jQuery内部可能会有所启示。如果您在此处玩单键和双击游戏：


然后您将看到
.nextAll（）
列表排除了当前正在制作动画的元素，但我不知道为什么

在任何情况下，
.next（'.expand_me'）
都完全符合您的意图，因此我将继续前进。OTOH，
.next（）
和
.nextAll（）.first（）
之间的差异可能会困扰我好几天，希望有人能给我一个解释，让我安心

更新：如果您使用DOM检查器（例如WebKit的“inspect element”）观看动画，您将看到jQuery UI的扩展
。toggle
在动画期间将动画元素包装在一个额外的
中。因此，如果你说
.nextAll（'.expand\u me'）
它将找不到你想要的
.expand\u me
，因为它不再是兄弟姐妹：它将是临时兄弟姐妹的孩子。
.next（'.clear'）.next（'.expand_-me'）
将很方便地找不到任何内容，因为临时包装将阻止直接路径“this->.clear->.expand_-me”，并且单击处理程序在双击的第二次单击时不会执行任何操作

我可能应该直接进入jQuery UI源代码，找出奇怪的
.nextAll（）
行为。哦，好吧，至少我知道现在发生了什么

更新2:一个比所有这些
更好的方法。下一个
业务是明确地将链接绑定到切换面板：

<a data-panel="panel-1">
    <!--...-->
</a>
<!--...-->
<div id="panel-1" class="expand_me">
    <!--...-->
</div>

如果您使用的是较旧的jQuery，则可能必须使用
.attr（'data-panel'）
而不是
.data（'panel'）

示例：
@mu-如果我使用
.next（“.expand_me”）
（完全没有）或
.next（）
（切换错误的元素），则它不起作用。我是否使用了错误的命令？@mu-我认为
.next（）
不起作用的原因是
a
标记和
.expand\u me
之间存在元素。到目前为止，我所能想到的就是这些…@sscirrus：是的，我扔掉了我的jsfiddle中的
东西来简化事情。请尝试
$（this）.next（'.clear'）.next（.expand_me”）。改为切换
。@sscirrus：在我的答案末尾检查我的更新。我弄明白了为什么你的
.nextAll
与jQuery用户界面的扩展
一起使用时会引起问题。toggle
@sscirrus:If
.next（'.clear'）。next（'.expand_-me'）
不起作用，然后试试
。next（'.clear'）。next（'.expand_-me'）。next（'.expand-me'）
（完全没有）或
.next（）
（切换错误的元素）。我是否使用了错误的命令？@mu-我认为原因是
<a data-panel="panel-1">
    <!--...-->
</a>
<!--...-->
<div id="panel-1" class="expand_me">
    <!--...-->
</div>

$('.toggle').click(function() {
    $('#' + $(this).data('panel')).stop().toggle('blind', { }, 500);
});