html - Jquery - 单击时触发子菜单，然后在第二次单击时关闭

Question

我今天正在尝试 Jquery，我必须设置一个仅在手机上触发的子菜单，方法是单击它。我找到了一种方法来做到这一点！它可以工作，但我无法在再次单击父菜单时关闭它。

你们能帮我做吗？

代码：

$('.menu-item-has-children').find('> li').click(function() {
  $('.menu-item-has-children > li').not(this).find('ul').slideUp();
  $(this).find('ul').stop(true, true).slideToggle(400);
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="primary-nav">
  <li class="menu-item menu-item-has-children">
    <a href="#">Parent menu</a>
    <ul class="sub-menu">
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
    </ul>
  </li>
</nav>

再次非常感谢:)

标签： htmljquerycssmenusubmenu

Answer 1

您的选择器在单击功能之前不好。

这就是你想要的？

$('.menuTrigger').click(function() {
  //$('.menu-item-has-children > li').not(this).find('ul').slideUp();
  $(this).next('ul.sub-menu').stop(true, true).slideToggle(400);
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="primary-nav">
  <li class="menu-item menu-item-has-children">
    <a href="#" class="menuTrigger">Parent menu</a>
    <ul class="sub-menu">
      <li class="menu-item"><a title="Contract Negotiation" href="#">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation" href="#">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation" href="#">Contract Negotiation</a></li>
    </ul>
  </li>
</nav>