Question

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

请帮帮我！我有几个小时的时间，我无法解决如何解决它。它上面的代码用于水平多级菜单。点击显示一个子菜单并隐藏所有其他子菜单，一切正常，直到这一点。

当我需要打开嵌套到子菜单的子菜单时，问题出现了。代码隐藏所有元素并仅显示de clicked子菜单;隐藏所有元素，包括子菜单的父元素，以便不显示点击的子菜单。

如何显示和隐藏嵌套的子菜单???我希望有人可以帮助我，并提前感谢。这是简化菜单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

你需要停止传播。没有这个，所有家长都会点击点击事件。

$('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;，在点击项目添加类上，例如活动并显示嵌套项目display: block;

在此示例中，如果您需要更多嵌套项简单，请在ul

内添加primary-nav__subnav类~__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：如何显示当前嵌套的子菜单并隐藏其他子菜单？

2 个答案: