不是jQuery链中下一个元素上的这个选择器

Not this selector on next element in jQuery chain

本文关键字：选择器 元素 jQuery 下一个 不是      更新时间：2023-09-26

我有一系列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

感谢

试试这个：你可以先找到可折叠的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);
    }
});
相关文章：