单击主菜单项上的 jQuery 不会显示子子菜单

Question

我在 Wordpress 中构建自定义移动菜单，但在隐藏和显示子菜单项时遇到问题。我使用类名 .menu-item-has-children 作为我的选择器，我的目标是要切换的子类 .sub-menu。

我的问题是子菜单只会在可见时关闭，并且不会在单击父元素时再次重新打开。

在此处查看示例(使用检查器查看移动菜单 < 1200px):

http://dev-inspired-spine.pantheonsite.io/

我做错了什么？

$('.menu-item-has-children').on('click', function() {
  var submenu = $(this).children('.sub-menu');
  if ($(submenu).is(':hidden')) {
    $(submenu).slideDown(200);
  } else {
    $(submenu).slideUp(200);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-24685" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24685"><a href="#">About Us</a>
      <ul class="sub-menu">
        <li id="menu-item-24731" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24731"><a href="#">Our Innovation Approach</a></li>
        <li id="menu-item-24732" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24732"><a href="#">BLog</a></li>
        <li id="menu-item-24733" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24733"><a href="#">Newsroom</a></li>
      </ul>
    </li>
    <li id="menu-item-24686" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24686 et-touch-hover et-show-dropdown et-hover"><a href="#">Conditions</a>
      <ul class="sub-menu">
        <li id="menu-item-24734" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24734"><a href="#">Degenerative Disc Disease</a></li>
        <li id="menu-item-24735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24735"><a href="#">Degenerative Scoliosis</a></li>
        <li id="menu-item-24736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24736"><a href="#">Disc Herniation</a></li>
        <li id="menu-item-24737" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24737"><a href="#">Facet Joint Syndrome</a></li>
        <li id="menu-item-24738" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24738"><a href="#">Spinal Stenosis</a></li>
        <li id="menu-item-24739" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24739"><a href="#">Spondylolisthesis</a></li>
        <li id="menu-item-24740" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24740"><a href="#">Thoracic Disc Disease</a></li>
        <li id="menu-item-24741" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24741"><a href="#">Arthritis of Spine</a></li>
        <li id="menu-item-24742" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24742"><a href="#">Fractures</a></li>
        <li id="menu-item-24743" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24743"><a href="#">Myelopathy</a></li>
        <li id="menu-item-24744" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24744"><a href="#">Radiculopathy</a></li>
        <li id="menu-item-24745" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24745"><a href="#">Spine Deformities</a></li>
      </ul>
    </li>
    <li id="menu-item-24687" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24687"><a href="#">Treatments</a>
      <ul class="sub-menu">
        <li id="menu-item-24746" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24746"><a href="#">Spinal Fusion Facts</a></li>
        <li id="menu-item-24747" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24747"><a href="#">OLLIF</a></li>
        <li id="menu-item-24748" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24748"><a href="#">MIS-DLIF</a></li>
        <li id="menu-item-24749" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24749"><a href="#">MIS-DTIF</a></li>
        <li id="menu-item-24750" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24750"><a href="#">SI Joint Fusion</a></li>
        <li id="menu-item-24751" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24751"><a href="#">Laminectomy</a></li>
        <li id="menu-item-24752" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24752"><a href="#">Laminoplasty</a></li>
      </ul>
    </li>
    <li id="menu-item-24688" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24688"><a href="#">Patient Experience</a>
      <ul class="sub-menu">
        <li id="menu-item-24690" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24690"><a href="#">New Patient Forms</a></li>
        <li id="menu-item-24753" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24753"><a href="#">FAQs</a></li>
        <li id="menu-item-24754" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24754"><a href="#">Coverag</a></li>
      </ul>
    </li>
    <li id="menu-item-24689" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24689"><a href="#">Locations</a></li>
  </ul>
</div>

Answer 1

我查看了您的网站，适用于移动设备(<1200 px) - 你有父菜单的链接，所以点击父菜单后，页面会重定向到相应的链接。因此，请在您的 Javascript 代码中试试这个。

$('.menu-item-has-children').on('click', function(e) {
  e.preventDefault();
  var submenu = $(this).children('.sub-menu');
  if ($(submenu).is(':hidden')) {
    $(submenu).slideDown(200);
  } else {
    $(submenu).slideUp(200);
  }
});

希望对您有所帮助。