向上滑动和向下滑动问题

Question

Why does this work, this just says when clicked slide the one that was clicked down and all other siblings slide up.

(function(){
    var dd = $('dd');
    var dt = $('dt');

    dd.filter(':nth-child(n+4)').hide();

    dt.on('click', dt , function(){
        $(this).next()
            .slideDown(200).  //slide down first works
            siblings('dd').slideUp(200);
    });

})();

but not this. This one just says the one that was clicked, fist hide the siblings and then show the one that was clicked, but it dosent work well and im having trouble understanding why.

(function(){
    var dd = $('dd');
    var dt = $('dt');

    dd.filter(':nth-child(n+4)').hide();

    dt.on('click', dt , function(){
        $(this).next()
            .siblings('dd').slideUp(200)  //slide down is now second
            .slideDown(200);
    });

})();

Here is a link of the none working one

http://jsfiddle.net/#&togetherjs=CoLBMUmtSk

Answer 1

You're chaining it on the siblings to "slideDown" even though you've just told them to "slideUp"

Javascript:

(function () {
    var dd = $('dd');
    var dt = $('dt');

    dd.filter(':nth-child(n+4)').hide();

    dt.on('click', dt, function () {
        $(this).next()
            .siblings('dd').slideUp(200);
        $(this).next().slideDown(200);
    });

})();

That should work.

Answer 2

In your first piece of code all the animations happen at the same time, because you are calling the slideUp and slideDown functions without delays or callbacks. The second code does not work because you are first calling the siblings function, and then calling slideUp and slideDown on the result of this, so never really acting on the item itself.

If you want to first hide the siblings, then show the item you want you can use the following:

(function () {
    var dd = $('dd');
    var dt = $('dt');

    dd.filter(':nth-child(n+4)').hide();

    dt.on('click', dt, function () {
        var next = $(this).next();
        next.siblings('dd').slideUp(1000);
        next.delay(1000).slideDown(1000);
    });

})();

I have increased the time to make it clear that one action (slideUp) is happening before the other (slideDown).

Answer 3

Like i explained in your code example live, this would work as you intended:

(function(){
    var dd = $('dd');
    var dt = $('dt');

    dd.filter(':nth-child(n+4)').hide();

    dt.on('click', dt , function(){
        dd.slideUp(200);

        $(this).next('dd').slideDown(200);
    });

})();

Using siblings for this seems like an overkill, and jQuery is notoriously bad at handling multiple animations of the same elements at once.