Javascript 显示隐藏li元素的jquery问题

我试图获得类似手风琴的功能，我只有

类.level1、.level2、.level3..等等，问题是，如果我单击.level2，项目将隐藏到下一个.level2元素，而没有问题
但如果我单击.level3并隐藏.level4，然后单击.level2隐藏.level3，我可以在.level2下看到.level4项

我不知道如何解决这个问题

请查看演示：

$（'.level2'）。单击（函数（e）{
if（$（this）.next（'li'）.hasClass（'level3'））{
$（this.nextUntil（'.level2'）.toggle（）；
e、 预防默认值（）
}
})
$（'.level3'）。单击（函数（e）{
if（$（this）.next（'li'）.hasClass（'level4'））{
$（this.nextUntil（'.level3'）.toggle（）；
e、 预防默认值（）
}
})
$（'.level4'）。单击（函数（e）{
if（$（this）.next（'li'）.hasClass（'level5'））{
$（this.nextUntil（'.level4'）.toggle（）；
e、 预防默认值（）
}
})

不确定你想要实现什么，看看这个，它可能会给你更干净、更高效的想法：

$（'li a'）。单击（函数（e）{
if（$（this）.parent（）.find（'>ul'）.length>0）{
$（this.parent（）.find（'>ul'）.toggle（）；
}
e、 预防默认值（）；
})

如果您希望切换嵌套列表的结构化菜单，则可能会以错误的方式执行此操作。但是假设您确实想要一个任意的平面列表，您需要检查以下项目是否可见，然后显式调用show（）或hide（）。例如：

$('.level2').click(function (e){
    toggleUntil(this, 'level3', 'level2');
    e.preventDefault();
})

$('.level3').click(function (e){  
    toggleUntil(this, 'level4', 'level3');
    e.preventDefault();
});

$('.level4').click(function (e){
    toggleUntil(this, 'level5', 'level4');
    e.preventDefault();
})

function toggleUntil(x, start, last) {
    if ($(x).next('li').hasClass(start)) {
         if ($(x).next('li').is(':visible')) {
             $(x).nextUntil('.' + last).hide();
         } else {
            $(x).nextUntil('.' + last).show();
         } 
    }
}

---

我敢打赌，您的

$（'.level2'）下有
toggle（）
。在（单击…

）上。最好将其更改为

hide（）

，并将

show（）

作为

$（'.levelX'）的click属性的一部分

您需要在

if

之外调用

e.preventDefault

。否则，它会跟随链接并重新加载页面。谢谢，但问题不是preventDefault（）