在jquery中对事件排序
提问于 2011-07-20 18:54:09
我有一个这样的构造......
<div id="right_top_block" class="drop_head">
<div id="right_top_block_head" class="dropper block_head rounded-corner">
Friends
</div>
<div class="box_container">
<div id="box_list" class="drop_list">
<ul id="right_top_ul">
</ul>
</div>
</div>
</div>我删除了里面的内容，因为它太长了.我有一个像这样的jquery。
$(document).ready(function() {
$('.drop_head').each(function(i, e) {
$('.dropper', e).click(function() {
$('.drop_list', e).slideToggle(1500);
});
});
$('.dropper').click(function(e) {
$(e.target).parent().removeClass('leaf_class');
if ($(e.target).parent().height() < 300) $(e.target).parent().addClass('leaf_class');
});
});现在发生的事情是，每次单击dropper时，都会向right_top_block添加一个叶类，然后在相应的drop_list上完成一个slideDown(作为slideToggle的一部分)(我有很多这样的类)……现在，如果再次单击它，该叶类将从right_top_block中删除，然后在相应的drop_list上执行slideUP(作为slideToggle的一部分)。但我真正想要的是，当执行slideUp时，我希望slideToggle完成，然后删除leaf_class。如何更改事件执行的顺序？我猜由于我在切换中指定的延迟1500是导致这种情况的原因。虽然不想松开它提供的缓慢过渡，但我希望完成它，然后删除leaf类。我该怎么做呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-07-24 08:42:52
首先，关于你问题中的代码有两点备注：
- 运行在
click上的代码被分成两个事件处理程序:一个负责幻灯片动画，另一个负责类更改。这非常令人困惑，实际上使问题变得更加复杂。如果这两个处理程序合并成一个处理程序，或者如果一个处理程序执行整个slideDown()操作序列，而另一个处理程序使用e.target执行整个slideUp()处理程序，并且该元素似乎不包含任何派生click事件的元素，则会更容易。这本身是完全正确的，但使用this会更短，让你的意图更清晰。
现在，让我们来看看你的需求。看起来您希望在slideDown()动画开始之前添加leaf_class，但仅在slideUp()动画完成后删除。
您可以通过一对绑定到toggle事件的处理程序，以及显式调用slideDown()和slideUp()而不是slideToggle()来实现这一点。
$('.dropper').toggle(function() {
var $dropHead = $(this).parent();
$dropHead.addClass("leaf_class");
$(".drop_list", $dropHead).slideDown(1500);
}, function() {
var $dropHead = $(this).parent();
$(".drop_list", $dropHead).slideUp(1500, function() {
$dropHead.removeClass("leaf_class");
});
});Stack Overflow用户
发布于 2011-07-20 18:58:10
如果我已经理解了您在问什么，那么您正在寻找slideToggle函数的回调函数：
$('.drop_list', e).slideToggle(1500, function() {
//Do stuff after slide is complete
}); 在幻灯片动画完成时执行回调函数。有关详细信息，请参阅jQuery docs。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6766982
复制
腾讯云开发者
