文章/答案/技术大牛

发布

社区首页 >问答首页 >一个窗体上的多个JQuery切换

问一个窗体上的多个JQuery切换
EN

Stack Overflow用户

提问于 2011-02-27 00:53:02

回答 1查看 541关注 0票数 2

我有一个表格，其中一些字段附有扩展框。它看起来有点像这样(经过几次稍微的变化)：

<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来在用户单击任何.toggle时展开.expand_me 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就会在它下面切换.显然，我的当前函数并不总是调用下一个.expand_me，而是调用下一个当前没有动画的函数。如何确保切换函数始终并且只针对下一个div，而不管其动画状态如何？
，我想打破JQuery本机通过将.stop()添加到切换行而构建的动画队列，如下所示：

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

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

jquery

ruby-on-rails

jquery-ui

toggle

回答 1

Stack Overflow用户

发布于 2011-02-27 03:42:55

如果只使用.next()而不是.nextAll().first()，则工作正常：

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

或者，如果您使用的是标准的.toggle()，而不是jQuery中的扩展：

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

我不知道为什么会有区别，但是参观一下jQuery内部可能会发现。如果您在这里进行单点和双击操作：

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

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

在任何情况下，.next('.expand_me')完全符合您的意图，所以我只需要继续前进。OTOH，.next()和.nextAll().first()之间的这种差异可能会困扰我好几天，希望有人能给我一个解释来缓解我的思绪。

更新:如果您使用DOM检查器(如WebKit的“检查元素”)观看动画，您将看到jQuery的扩展.toggle在动画期间将动画元素包装在一个额外的<div>中。所以，如果您说.nextAll('.expand_me')，它就找不到您想要的.expand_me了，因为它不再是兄弟姐妹了:它将是临时兄弟姐妹的孩子。.next('.clear').next('.expand_me')将很方便地找不到任何东西，因为临时包装器将阻塞直接路径"this -> .clear -> .expand_me“，而单击处理程序在双击的第二次单击时不会执行任何操作。

我可能应该直接进入jQuery源代码，找出奇怪的.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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5130672

复制

相似问题

问一个窗体上的多个JQuery切换
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问一个窗体上的多个JQuery切换EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问一个窗体上的多个JQuery切换
EN