Question

I have a construct like this…….

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

I removed the inner contents as it is too lengthy… and i have a jquery like this…

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

Now what happens is, each time the dropper is clicked, a leaf class is added to the right_top_block and then a slideDown(as part of slideToggle) on the correspoding drop_list is done( I have many such)…. Now if it is clicked again the leaf class is removed from the right_top_block and then a slideUP(as part of slideToggle) on the corresponding drop_list is performed. But what i really want is, when a slideUp is performed, i want the slideToggle to complete and then i want the leaf_class to be removed. How do i change the order of the event execution? I guess due to the delay 1500 i am specifying in the toggle is the cause for this. While don’t want to loose the slow transition that it gives, i want that to be completed and then the leaf class to be removed. How do i do this?

Answer 1

First, two remarks about the code in your question:

• The code that runs on click is split into two event handlers: one responsible for the slide animation and the other for the class change. That’s quite confusing and actually makes the problem more complex. It would be easier if these two handlers were merged into one, or if one handler was performing the whole slideDown() operation sequence and the other the whole slideUp() sequence.

• You’re using e.target with an element that doesn’t seem to contain any descendant from where a click event would bubble up. That’s perfectly valid in itself, but using this instead would be shorter and make your intent clearer.

Now, let’s look at your requirements. It looks like you want leaf_class to be added before the slideDown() animation starts, but only removed after the slideUp() animation completes.

You can achieve that in a simpler way with a pair of handlers bound to the toggle event, and explicit calls to slideDown() and slideUp() instead of 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");
    });
});