jQuery的问题与隐藏李元素

Question

我试图得到一个类似手风琴的功能，我只有<li>与类.level1，.level2，.level3 ..等等，我的问题是，如果我点击.level2，项目将隐藏，直到下一个.level2元素没有问题。
但是，如果我点击.level3并隐藏.level4，然后单击.level2隐藏.level3，我可以在.level2下看到.level4项目。

我不知道如何解决

请检查演示：

$('.level2').click(function(e) { 
 

 
    if ($(this).next('li').hasClass('level3')) { 
 
    $(this).nextUntil('.level2').toggle(); 
 
    e.preventDefault() 
 
    } 
 
}) 
 

 
$('.level3').click(function(e) { 
 
    if ($(this).next('li').hasClass('level4')) { 
 

 
    $(this).nextUntil('.level3').toggle(); 
 
    e.preventDefault() 
 
    } 
 
}) 
 

 
$('.level4').click(function(e) { 
 
    if ($(this).next('li').hasClass('level5')) { 
 

 
    $(this).nextUntil('.level4').toggle(); 
 
    e.preventDefault() 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li class="level1"><a href=""><span>Level1</a></li> 
 
<li class="level2"><a href=""><span>Level2</a></li> 
 
<li class="level2"><a href=""><span>Level2</a></li> 
 
<li class="level3"><a href=""><span>Level3</a></li> 
 
<li class="level3"><a href=""><span>Level3</a></li> 
 
<li class="level3"><a href=""><span>Level3</a></li> 
 
<li class="level4"><a href=""><span>Level4</a></li> 
 
<li class="level2"><a href=""><span>Level2</a></li> 
 
<li class="level3"><a href=""><span>Level3</a></li> 
 
<li class="level4"><a href=""><span>Level4</a></li> 
 
<li class="level4"><a href=""><span>Level4</a></li> 
 
<li class="level3"><a href=""><span>Level3</a></li> 
 
<li class="level4"><a href=""><span>Level4</a></li> 
 
<li class="level2"><a href=""><span>Level2</a></li> 
 
<li class="level3"><a href=""><span>Level3</a></li> 
 
<li class="level4"><a href=""><span>Level4</a></li> 
 
<li class="level4"><a href=""><span>Level4</a></li> 
 
<li class="level2"><a href=""><span>Level3</a></li> 
 
</ul> 
 
     
 
    
 

Answer 1

如果您要切换嵌套列表的结构化菜单，您可能会以错误的方式解决此问题。但是假设你想拥有一个任意的平面列表，你需要检查下面的项目是否可见，然后明确地调用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(); 
     } 
    } 
} 

Answer 2

不知道你想什么来实现的，对这个一看，可能会给你更清洁和更高效的想法：

$('li a').click(function (e){ 
 
    
 
    if($(this).parent().find('>ul').length>0){ 
 
     $(this).parent().find('>ul').toggle(); 
 
} 
 
    e.preventDefault(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
<li><a href=""><span>Level1</a> 
 
    <ul> 
 
     <li><a href=""><span>Level2</a> 
 
      <ul> 
 
       <li><a href=""><span>Level3</a></li> 
 
       <li><a href=""><span>Level3</a></li> 
 
       <li><a href=""><span>Level3</a></li> 
 
       <li><a href=""><span>Level3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href=""><span>Level2</a></li> 
 
     <li><a href=""><span>Level2</a></li> 
 
     <li><a href=""><span>Level2</a> 
 
      <ul> 
 
       <li><a href=""><span>Level3</a></li> 
 
       <li><a href=""><span>Level3</a></li> 
 
       <li><a href=""><span>Level3</a></li> 
 
       <li><a href=""><span>Level3</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</li> 
 

 
</ul>