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）我单击级别1 A 然后级别2 A ，现在级别1 A和级别2 A扩展了

2）我单击级别1 B ，然后单击级别1 A ，我仍然看到1 a a，其孩子被展开。

我想要的结果是：

当我单击1级A时，它会崩溃的所有内容，而不是显示我之前单击的所有内容，如果我单击1级。

。

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>