我有一个表单,其中一些字段附加了扩展框。它看起来有点像这样(几次略有变化):
<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>
两个问题:
如果我双击或三次单击
.toggle
,则会在其下方切换 2-3 个.expand_me
div。显然,我当前的函数并不总是调用下一个.expand_me
,而是调用下一个当前没有动画的函数。如何确保切换功能始终且仅针对下一个 div,无论其动画状态如何?我想通过将
.stop()
添加到我的切换行来打破 JQuery native 构建的动画排队,如下所示:$(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 的“检查元素”)观看动画,您将看到 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')
.
关于jquery - 一种表单上的多个 JQuery 切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5130672/