Question

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

<a class="label toggle" rel="toggle[time_allowed]">
  <label for="file_time_allowed" id="time_allowed_label">
    Time Allowed (mins)
  </label>
</a>
<%= form.text_field :time_allowed, :id => "time_allowed" %>
<div class="clear"></div>
<div class="expand_me" id="time_allowed_toggle" style="display:none;"><br />
  <div class="linkExpand expandDiv">
Set a time limit.<br /><br />
  </div>    
</div>

我有这个JQuery在用户点击任何.expand_me时扩展.toggle div。

<script type="text/javascript">
$(function() {
  $(".toggle").click(function() {
    $(this).nextAll(".expand_me").first().toggle("blind",{},500);
    return false;
  });
});
</script>

两个问题：

如果我在.toggle上双击或三击，则会在其下方切换2-3个.expand_me div。显然，我当前的函数并不总是调用下一个.expand_me，而是下一个当前没有动画的函数。如何确保切换功能始终只针对下一个div而不管其动画状态如何？
我想通过将.stop()添加到我的切换行来打破JQuery原生构建的动画排队，如：
```
$(this).nextAll(".expand_me").first().stop().toggle("blind",{},500);
```
由于我遇到＃1的问题，我无法测试这是否有效。如果没有，我怎样才能确保双击div的新手不会遇到令人困惑的双动画？

Answer 1

如果仅使用.next()而非.nextAll().first()

，则可以正常使用

http://jsfiddle.net/ambiguous/xdH82/3/

或者，如果您使用标准.toggle()而不是jQuery-UI中的扩展名：{/ p>

http://jsfiddle.net/ambiguous/xdH82/4/

我不知道为什么会有区别，但是对jQuery内部的介绍可能会有所启示。如果你在这里玩单击和双击：

http://jsfiddle.net/ambiguous/Nudkh/

然后你会看到.nextAll()列表排除了当前的动画元素，但我不知道为什么。

在任何情况下，.next('.expand_me')都与您的意图完全匹配，所以我只想继续下去并继续前进。 OTOH，.next()和.nextAll().first()之间的这种差异可能会困扰我好几天，希望有人会提供一个解释来缓解我的想法。

UPDATE：如果您使用DOM检查器（例如WebKit的“检查元素”）观看动画，您将看到jQuery-UI的扩展.toggle正在包装动画元素动画期间额外<div>。所以，如果你说.nextAll('.expand_me')它将找不到你想要的.expand_me因为它不再是兄弟姐妹了：它将是一个临时兄弟的孩子。 .next('.clear').next('.expand_me')将无法找到任何内容，因为临时包装器将阻止直接路径“this - ＆gt; .clear - ＆gt; .expand_me”并且点击处理程序在第二次单击双击时不会执行任何操作点击。

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

更新2 ：比所有这些.next业务更好的方法是明确将链接绑定到切换面板：

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

和

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

如果你有一个较旧的jQuery，那么你可能不得不使用.attr('data-panel')而不是.data('panel')。

示例：http://jsfiddle.net/ambiguous/pmQR7/1/

多个JQuery在一个表单上切换

两个问题：

1 个答案: