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

Posted 2023-05-08

【中文标题】Jquery - 单击时触发子菜单，然后在第二次单击时关闭

【英文标题】：Jquery - trigger submenu on click then close on second click

【发布时间】：2020-11-24 16:30:50

【问题描述】：

我今天正在尝试 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>

再次非常感谢:)

【参考方案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>

【讨论】：

非常感谢您的回答。这确实有帮助，但奇怪的是，我不在我的网站上工作。它确实会打开子菜单，但当我再次单击父菜单时不会关闭它。 ://

我的错，这是因为我忘了调用 jquery 3.3.1。有用！非常感谢：D

你能验证我的答案吗 plz :)

完成！对不起这里的新手。 :)

您好，很抱歉打扰，但我仍然在这个脚本上遇到了一点问题。在我的网站中，它确实打开和关闭子菜单。但是子菜单中的 li 不可点击（它只是关闭子菜单）。我能做点什么吗？

【参考方案2】：

[已解决] 我在 Facebook 上询问了一位同事，这是有效的代码：

$('.menu-item-has-children > a').click(function() 
  //$('.menu-item-has-children > li').not(this).find('ul').slideUp();
  var $submenu = $(this).next('.sub-menu'); 
  $('.sub-menu').not($submenu).slideUp(200); // fermer les autres menus
  $submenu.slideToggle(200); // slideToggle permet d'ouvrir ou fermer, selon l'état
);

.sub-menu 
display:none

<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>
  
  <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>