javascript - 不是 jQuery 链中下一个元素的选择器

Question

我有一串 jQuery在 li 中查找 ul 并为其高度设置动画的方法。

$('.collapse-trigger').click(function() { 
    if($(this).next('.collapse-ul').height() == 0) {
        $(this).css('background', '#000000');
        var height = $(this).next('.collapse-ul').children().length; 
        $(this).next('.collapse-ul').animate({height: height*42}, 500); // multiply height with number of menupoints
    }
    else { 
        $(this).css('background', '#414141');
        $(this).next('.collapse-ul').animate({height: 0}, 500);
    }
});

这样我就可以折叠每个ul，再次单击时它会动画回到0。我打算做的是，当其中一个 ul 动画消失时，其他动画将恢复为零。

我认为我需要类似 .not(this) 的东西，但很难解决。 我的尝试:

$('this').next().not('.collapse-ul', this).animate({height: 0}, 500); // <-- inside the not method I don't know how to write it

谢谢

Answer 1

尝试一下:您可以先找到可折叠的 ul，然后使用 .not() 进行过滤

$('.collapse-trigger').click(function() { 
    if($(this).next('.collapse-ul').height() == 0) {
        $(this).css('background', '#000000');
        var height = $(this).next('.collapse-ul').children().length;
        var $collapseUl = $(this).next('.collapse-ul');
        //filter current collapsible ul
        $('.collapse-ul').not($collapseUl).animate({height: 0}, 500); 
        $collapseUl.animate({height: height*42}, 500); // multiply height with number of menupoints
    }
    else { 
        $(this).css('background', '#414141');
        $(this).next('.collapse-ul').animate({height: 0}, 500);
    }
});