代码之家 › 专栏 › 技术社区 › Chris Gatherer

jQuery on click主菜单项不会显示子菜单

jquery-mobile wordpress css html jquery

Chris Gatherer · 技术社区 · 6 年前

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

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

此处查看示例(使用inspector查看移动菜单<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>

1 回复 | 直到 6 年前

Pankaj Bhandarkar 6 年前

我查看了你的移动网站 (<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);
  }
});

希望这对你有帮助。