javascript - jquery UL LI 折叠它下面的所有扩展子项

Question

我有一个如下所示的列表顺序:

<ul>
    <li>level 1 a
        <ul>
            <li>level 2 a
                <ul>
                    <li>level 3 a</li>
                    <li>level 3 b</li>
                </ul>
            </li>
            <li>level 2 b</li>
        </ul>
    </li>
    <li>level 1 b
        <ul>
            <li>level 2 c
                <ul>
                    <li>level 3 c</li>
                    <li>level 3 c</li>
                </ul>
            </li>
            <li>level 2 d</li>
            <li>level 2 e</li>
        </ul>
    </li>
</ul>

和 jquery 看起来像这样:

$(document).ready(function(){
  $('li').click(function(ev) {
    ev.stopPropagation();
      $(this).children('ul').show();
      $(this).prev().children('ul').hide();
      $(this).siblings().children('ul li ul').hide();
      $(this).next().children('ul').hide();
  }); 
  $('li > ul').hide();
});

现状:

1) 我点击level 1 a然后点击level 2 a，现在level 1 a和level 2 a展开了

2) 我点击level 1 b，然后我点击返回level 1 a，我仍然看到level 1 a 并且它的 child 被展开了。

我想要的结果是:

当我点击后退级别 1 a 时，它会折叠所有内容，而不是显示我之前点击的所有内容，如果我点击第 1 级，同样会转到级别 1 b。

jsfiddle

任何帮助都会很棒。谢谢

Answer 1

每当使用此方法单击sibling li 时，您都可以在children ul 上调用hide

 $('li').click(function(ev) {
    $(this).siblings('li').click(function() {
      $(this).siblings('li').children('ul').hide()
    })

$(document).ready(function() {
  $('li').click(function(ev) {
    $(this).siblings('li').click(function() {
      $(this).siblings('li').children('ul').hide()
    })
    
      $(this).children('ul').children('li').children('ul').hide()
   
   
    ev.stopPropagation();
    $(this).parent('ul').show();
     $(this).children('li').hide();
    $(this).siblings('li').children('ul li ul').hide();
    $(this).children('ul').show();
    $(this).prev('li').children('ul li ul').hide();
    $(this).next().children('ul').hide();
  });
  $('li > ul').hide();
});

current situation: 1) i click on level 1 a then level 2 a,
now level 1 a and level 2 a are expanded 2) i click on level 1 b,
then i click back the level 1 a,
i still see the level 1 a and its child is expanded. the outcome i want is: when i click back level 1 a,
it will collapse everything,
instead of showing everything that i clicked before,
same goes to level 1 b,
if i click that 1st.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>level 1 a
    <ul>
      <li>level 2 a
        <ul>
          <li>level 3 a</li>
          <li>level 3 b</li>
        </ul>
      </li>
      <li>level 2 b</li>
    </ul>
  </li>
  <li>level 1 b
    <ul>
      <li>level 2 c
        <ul>
          <li>level 3 c</li>
          <li>level 3 c</li>
        </ul>
      </li>
      <li>level 2 d</li>
      <li>level 2 e</li>
    </ul>
  </li>
</ul>