Question

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

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

请查看演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

不确定您要实现的目标，看看这一点，它可能会让您有更清洁，更高效的想法：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

jquery问题与show hide li元素

2 个答案: