当子 li 被按下时如何停止父级的切换类？

Question

这是我的 HTML：

<ul id="menu-mobile" class="menu menu-sliding">
  <li>
    <a href="javascript:void(0);">Home</a></span>
  </li>
  <li class="has-children">
    <a href="javascript:void(0);">IT Solutions</a>
    <span class="menu-item-toggle"><span></span></span>
    <ul class="sub-menu">
      <li class="has-children">
        <a href="javascript:void(0);">IT Services</a>
        <span class="menu-item-toggle"><span></span></span>
        <ul class="sub-menu">
          <li><a href="javascript:void(0);">Managed IT</a></li>
          <li><a href="javascript:void(0);">IT Support</a></li>
          <li><a href="javascript:void(0);">IT Consultancy</a></li>
          <li><a href="javascript:void(0);">Cloud Computing</a></li>
          <li><a href="javascript:void(0);">Cyber Security</a></li>
          <li><a href="javascript:void(0);">Custom Software</a></li>
        </ul>
      </li>
      <li class="has-children">
        <a href="">Industries</a>
        <span class="menu-item-toggle"><span></span></span>
        <ul class="sub-menu">
          <li><a href="javascript:void(0);">Banking</a></li>
          <li><a href="javascript:void(0);">Capital Markets</a></li>
          <li><a href="javascript:void(0);">Enterprise Technology</a></li>
          <li><a href="javascript:void(0);">Manufacturing</a></li>
          <li><a href="javascript:void(0);">Healthcare</a></li>
          <li><a href="javascript:void(0);">Higher Education</a></li>
          <li><a href="javascript:void(0);">Logistics</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

这是我的脚本：

$('ul.menu li.has-children').on('click', function () {
  $(this).toggleClass('menu-expand').siblings().removeClass('menu-expand');
});

看起来是这样的：

现在的问题是，每当我单击嵌套的 li 时，即 It Services / Industries .menu-expand 类会从父级中删除，即 It Solutions 并且整个块进入 display:none 状态。

如何解决这个问题？

Answer 1

我想您可以更改密钥以正确使用它，并且只为一级 li 覆盖它，如下所示：

$('ul.menu li.has-children a').on('click', function () {
  $(this).parent().toggleClass('menu-expand').siblings().removeClass('menu-expand');
});

为了正确解决这个问题，点击事件被转移到A标签和块的内部。

希望这会有所帮助。