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>