javascript - JQuery:如何显示当前的嵌套子菜单并隐藏其他子菜单？

Question

$('li').on('click', function(){
 $('li').not(this).each(function(){
  $(this).children('ul').addClass('hide');
 });
 $(this).children('ul').removeClass('hide');
});

请帮帮我!我花了好几个小时解决这个问题，但我不知道如何解决。上面的代码用于水平多级菜单。单击显示子菜单并隐藏所有其他子菜单，直到此时一切正常。

当我需要打开嵌套到子菜单的子菜单时，问题就来了。该代码隐藏所有元素并仅显示未点击的子菜单；隐藏所有元素，包括子菜单的父元素，因此不会显示单击的子菜单。

如何显示和隐藏嵌套的子菜单？？？我希望有人能帮助我，并在此先感谢。下面是简化菜单的HTML代码，经典的嵌套无序列表。

问题示例:JSFiddle

<ul class="menu">
 <li>Item
  <ul class="sub-menu"><!--This works fine-->
   <li>Item
    <ul class="nested sub-menu"><!--Here is the problem-->
     <li>Item
      <ul class="nested sub-menu"><!--Here is the problem too-->
       <li>Item</li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </li>
   <li>Item
    <ul class="sub-menu"><!--This works fine-->
     <li>Item
      <ul class="nested sub-menu"><!--Here is the problem-->
       <li>Item
        <ul class="nested sub-menu"><!--Here is the problem too-->
         <li>Item</li>
        </ul>
       </li>
      </ul>
     </li>
   </ul>
 </li>
</ul>

Answer 1

您需要停止传播。否则所有 parent 都会触发点击事件。

$('li').on('click', function(e) {
  $(this).children('ul').toggle();
  $(this).siblings('li').find('ul').hide();
  e.stopPropagation();
});

.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li>Item
    <ul class="sub-menu">
      <!--This works fine-->
      <li>Item
        <ul class="nested sub-menu">
          <!--Here is the problem-->
          <li>Item
            <ul class="nested sub-menu">
              <!--Here is the problem too-->
              <li>Item</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
   <li>Item
    <ul class="sub-menu">
      <!--This works fine-->
      <li>Item
        <ul class="nested sub-menu">
          <!--Here is the problem-->
          <li>Item
            <ul class="nested sub-menu">
              <!--Here is the problem too-->
              <li>Item</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>