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

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

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

Answer 2

我可以阅读你的 html 结构，但我看不到你的 css 是怎样的，否则这是我为你制作的示例，我正在使用 BEM 方法。

Code: example

想法很简单，在嵌套项上添加 display: none;，在单击项上添加 class 例如激活并显示嵌套项 display: block;

在此示例中，如果您需要更多嵌套项，只需在 ~__subnav

中添加 ul 和 class primary-nav__subnav

<ul class="primary-nav__subnav">
   <a href="#" class="primary-nav__link">Nested 1</a>
      <ul class="primary-nav__subnav">
         <a href="#" class="primary-nav__link">Nested 2</a>            
      </ul>
</ul>

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

JQuery: How to show current nested sub-menu and hide the others?

html

javascript

jquery

nested

menu