javascript - jquery 显示隐藏 li 元素的问题

Question

我尝试获得类似 Accordion 的功能，我只有 <li>对于类 .level1、.level2、.level3 ..etc，我遇到的问题是，如果我单击 .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

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

$('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>