Question

为什么这样做，这只是说点击时滑动了一个被点击的所有其他兄弟姐妹向上滑动。

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

})();

但不是这个。这个只是说一个被点击的人，拳头隐藏兄弟姐妹，然后显示被点击的那个，但它的效果很好，我很难理解为什么。

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

})();

以下是无效工作的链接

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

Answer 1

你正在将兄弟姐妹链接到＆＃34; slideDown＆＃34;即使你刚刚告诉他们＆＃34; slideUp＆＃34;

使用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);
    });

})();

这应该有效。

Answer 2

在您的第一段代码中，所有动画同时发生，因为您在没有延迟或回调的情况下调用slideUp和slideDown函数。第二个代码不起作用，因为您第一次调用siblings函数，然后调用slideUp和slideDown的结果，所以从来没有真正对项目本身采取行动。

如果您想先隐藏兄弟姐妹，然后显示您想要的项目，您可以使用以下内容：

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

})();

我已经增加了时间来清楚地表明一个动作（slideUp）正在另一个动作（slideDown）之前发生。

Answer 3

就像我在您的代码示例中所解释的那样，这可以按照您的意图运行：

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

})();

使用兄弟姐妹似乎是一种矫枉过正，而jQuery在同时处理相同元素的多个动画方面是出了名的。

向上滑动和向下滑动问题

3 个答案: