javascript - 关闭 jquery 中的上一个下拉菜单不起作用

Question

我的 WordPress 主题中有一个菜单，我必须关闭上一个下拉菜单并打开当前下拉菜单，我尝试了 bwelow 脚本但它不起作用。

你能帮帮我吗？

$('ul#left-primary-menu li').on('click', function(e) {
  e.preventDefault();
  //$(this).find('> ul').slideToggle();
  if (!$(this).next('.sub-menu').is(':visible')) {
    $('.sub-menu').hide(500);
    $(this).next('.sub-menu').slideToggle('fast');
  }
});

ul#left-primary-menu ul.sub-menu {
  display: none;
}

<ul id="left-primary-menu" class="menu">
  <li id="menu-item-663" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-318 current_page_item menu-item-663"><a href="#" aria-current="page">Home</a></li>

  <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-23">Tech
    <ul class="sub-menu">
      <li id="menu-item-602" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-602"><a href="#">Headphones</a></li>
      <li id="menu-item-603" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-603"><a href="#">Smartphones</a></li>
    </ul>
  </li>
  <li id="menu-item-627" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-627">Accessories
    <ul class="sub-menu">
      <li id="menu-item-625" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-625"><a href="#">Access1</a></li>
      <li id="menu-item-594" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-594"><a href="#">Access2</a></li>
      <li id="menu-item-647" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-647"><a href="#">Access3</a></li>
    </ul>
  </li>
  <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8">Footwear
    <ul class="sub-menu">
      <li id="menu-item-596" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-596"><a href="#">Rain Boots</a></li>
    </ul>
  </li>

</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

在搜索 .sub-menu 时使用 find() 而不是 next()

$('ul#left-primary-menu li').on('click', function(e) {
  e.preventDefault();
  //$(this).find('> ul').slideToggle();
  if (!$(this).find('.sub-menu').is(':visible')) {
    $('.sub-menu').hide(500);
    $(this).find('.sub-menu').slideToggle('fast');
  }
});

ul#left-primary-menu ul.sub-menu {
  display: none;
}

<ul id="left-primary-menu" class="menu">
  <li id="menu-item-663" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-318 current_page_item menu-item-663"><a href="#" aria-current="page">Home</a></li>

  <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-23">Tech
    <ul class="sub-menu">
      <li id="menu-item-602" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-602"><a href="#">Headphones</a></li>
      <li id="menu-item-603" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-603"><a href="#">Smartphones</a></li>
    </ul>
  </li>
  <li id="menu-item-627" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-627">Accessories
    <ul class="sub-menu">
      <li id="menu-item-625" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-625"><a href="#">Access1</a></li>
      <li id="menu-item-594" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-594"><a href="#">Access2</a></li>
      <li id="menu-item-647" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-647"><a href="#">Access3</a></li>
    </ul>
  </li>
  <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8">Footwear
    <ul class="sub-menu">
      <li id="menu-item-596" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-596"><a href="#">Rain Boots</a></li>
    </ul>
  </li>

</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>