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

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”类，因此两者都折叠了。

我的目标是，每次我点击子菜单时，如果它关闭则应该打开，或者如果它打开则应该关闭。每次我点击一个子菜单时，它应该相应地打开和关闭，但它的父子菜单应该保持打开状态。 这也应该适用于 sub-sub-sub-sub-menus 和 sub-sub-sub-sub-sub-menus 等......所以我真的需要一个通用的解决方案，无论子菜单嵌套多深都可以工作。

Answer 1

查看event.stopPropagation() 的文档。在基本层面上，它可以防止当前事件通过父元素“冒泡”。这是一个基于您提供的 sn-ps 的超级基本示例。

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

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>