javascript - 在 jquery 中排序事件

Question

我有一个这样的结构......

<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');
    });
});

现在发生的事情是，每次单击滴管时，都会将一个叶类添加到 right_top_block，然后在相应的 drop_list 上完成一个 slideDown(作为 slideToggle 的一部分)(我有很多这样的)......现在如果再次单击，则叶类将从 right_top_block 中删除，然后在相应的 drop_list 上执行 slideUP(作为 slideToggle 的一部分)。但我真正想要的是，当执行 slideUp 时，我希望 slideToggle 完成，然后我希望删除 leaf_class。我如何更改事件执行的顺序？我想由于我在切换中指定的延迟 1500 是造成这种情况的原因。虽然不想放松它提供的缓慢过渡，但我希望完成它，然后删除叶类。我该怎么做？

Answer 1

首先，关于您问题中的代码的两点说明:

• click 上运行的代码分为两个事件处理程序:一个负责幻灯片动画，另一个负责类更改。这非常令人困惑，实际上使问题更加复杂。如果这两个处理程序合并为一个，或者如果一个处理程序执行整个 slideDown() 操作序列而另一个处理程序执行整个 slideUp() 序列，将会更容易。

• 您将 e.target 与一个元素一起使用，该元素似乎不包含任何 click 事件会冒泡的后代。这本身是完全有效的，但使用 this 会更短，并使您的意图更清晰。

现在，让我们看看您的要求。看起来您希望 leaf_class 添加到 before slideDown() 动画开始，但仅在 slideUp() 动画完成。

您可以使用绑定(bind)到 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");
    });
});