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

Posted 2023-05-09

【中文标题】单击主菜单项的jQuery不会显示子子菜单

【英文标题】：jQuery on click main menu items won't show child sub menu

【发布时间】：2018-07-29 23:32:56

【问题描述】：

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

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

在此处查看示例（使用检查器查看

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>

【问题讨论】：

在你的 javascript 代码中试试这个：$('.menu-item-has-children').on('click', function(e) e.preventDefault(); ...

谢谢，我最终按照您的建议进行了操作，并且成功了！谢谢。

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

希望对你有所帮助。