Jquery

Question

我正在尝试 Jquery 看来今天我不得不设置一个仅在移动 phone 上触发的子菜单，方法是单击它。我找到了一种方法来做到这一点！它可以工作，但我无法在父菜单上再次单击将其关闭。

你们能帮我做一下吗？

代码：

$('.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>

再次感谢:)

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>

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

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

Jquery - trigger submenu on click then close on second click

html

css

menu

submenu