Question

我正在使用一系列jQuery方法在ul中找到li并为其设置高度。

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

在jQuery链中的下一个元素上没有这个选择器

1 个答案: