Question

似乎已经有一些与此相关的主题，但是他们的答案似乎都对我没有帮助。

因此，我正在构建一个Wordpress主题，并且希望它具有子菜单和子子菜单等功能。所以我最终得到的菜单结构有点像这样：

<ul id="menu-main-navigation-menu" class="menu">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item current_page_item"><a href="" aria-current="page">Home</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Products</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="">Services</a>
    <ul class="sub-menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Basic</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Intermediate</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="">Advanced</a>
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Advanced Service 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Advanced Service 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

因此，拥有孩子ul的li的类别为“ menu-item-has-children”，这是他们与其他li的唯一区别。

现在，在jQuery中，我已经尝试过：

jQuery(document).on('click','.menu-item-has-children',function(){
  jQuery(this).toggleClass('active');
});

但是问题在于，当我单击“ .menu-item-has-children”中的“ .menu-item-has-children”时，我实际上一次单击了两者，因此子子菜单中添加了“ .active”类，并按需打开它，但是它的父子菜单丢失了“ .active”类，从而使两者都崩溃了。

我的目标是，每次我单击一个子菜单时，如果它关闭了，那么它应该打开，或者如果它打开了，它应该关闭。每次单击子子菜单时，它都应相应打开和关闭，但是其父子菜单应保持打开状态。这也应该适用于子菜单和子菜单等。因此，我确实需要一个通用的解决方案，无论嵌套的子菜单有多深，它都将起作用。

Answer 1

看看event.stopPropagation()的文档。从根本上讲，它防止当前事件通过父元素“冒泡”。这是一个基于您提供的摘录的超级基本示例。

您还可以在点击处理程序中添加其他检查，例如确定某项是否具有类或子级-但在基本级别上，最简单的操作是停止通过父元素传播。

jQuery(document).on('click', '.menu-item-has-children', function(e){
  e.stopPropagation();
  jQuery(this).toggleClass('active');  
});

.menu > li {
  display: block;
}

.sub-menu {
  display: none;
}

.active > .sub-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main-navigation-menu" class="menu">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item current_page_item"><a href="#" aria-current="page">Home</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Products</a></li>
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="#">Services</a>
    <ul class="sub-menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Basic</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Intermediate</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="#">Advanced</a>
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Advanced Service 1</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Advanced Service 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

jQuery：单击子菜单时如何使子菜单保持打开状态

1 个答案: