jquery - 一种表单上的多个 JQuery 切换

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>

当用户单击任何 .toggle 时，我有这个 JQuery 来展开 .expand_me div。

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

两个问题:

1. 如果我双击或三次单击 .toggle，则会在其下方切换 2-3 个 .expand_me div。显然，我当前的函数并不总是调用下一个 .expand_me ，而是调用下一个当前没有动画的函数。如何确保切换功能始终且仅针对下一个 div，无论其动画状态如何？

2. 我想通过将 .stop() 添加到我的切换行来打破 JQuery native 构建的动画排队，如下所示:

   $(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 的扩展:

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

我不知道为什么会有差异，但是浏览一下 jQuery 的内部结构可能会有所启发。如果您在这里单击和双击:

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

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

无论如何，.next('.expand_me')完全符合你的意图，所以我会继续前进。 OTOH，.next()之间的区别和.nextAll().first()可能会困扰我好几天，希望有人能提供一个解释来缓解我的心情。

更新:如果您使用 DOM 检查器(例如 WebKit 的“检查元素”)观看动画，您将看到 jQuery-UI 的扩展 .toggle将动画元素包装在额外的 <div> 中动画期间。所以，如果你说.nextAll('.expand_me')它不会找到.expand_me您想要的，因为它不再是 sibling :它将是临时 sibling 的 child 。 .next('.clear').next('.expand_me')很容易找不到任何东西，因为临时包装器将阻止直接路径“this -> .clear -> .expand_me”，并且单击处理程序不会在双击的第二次单击时执行任何操作。

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

更新 2:比这一切更好的方法 .next业务将明确地将链接绑定(bind)到切换面板:

<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/