Slide toggle other submenus when a submenu opens

问题

Hello I have a mobile menu with sub-menus. I have it set up and working properly but I would like to add another feature.

I want it so when a sub-menu is open, and a user clicks to open another sub-menu, the first sub-menu collapses (or closes).

Here is the basic html structure:

<ul id="menu-main-menu">
    <li class="menu-item-has-children"><a>parent link</a>
        <ul class="sub-menu">
            <li><a href="#">child link</a></li>
            <li><a href="#">child link</a></li>
        </ul>
    </li>

    <li class="menu-item-has-children"><a>parent link</a>
        <ul class="sub-menu">
            <li><a href="#">child link</a></li>
            <li><a href="#">child link</a></li>
        </ul>
    </li>
</ul>

Here is the jQuery:

jQuery("#mobile-nav-icon").click(function(){
    jQuery('#menu-main-menu').slideToggle();
});

jQuery('#menu-main-menu > .menu-item-has-children > .sub-menu').addClass('first-sub');

jQuery('#menu-main-menu > .menu-item-has-children a').click(function(){
    jQuery(this).siblings('.first-sub').slideToggle();
});

So when one sub-menu is open, and a user opens another sub-menu. the first one toggles closed. I tried using

jQuery.not(this).siblings('.first-sub').slideUp();

But that did not work.

Any suggestions?

回答1:

Get .sub-menu within the sibling of parent .menu-item-has-children element and then slide it up.

jQuery(this)
     // get the parent li
     .closest('.menu-item-has-children')
     // get it's siblings
     .siblings()
     // get elements to hide
     .find('.sub-menu')
     // apply slide up animation
     .slideUp();

jQuery("#mobile-nav-icon").click(function() {
  jQuery('#menu-main-menu').slideToggle();
});

jQuery('#menu-main-menu > .menu-item-has-children > .sub-menu').addClass('first-sub');

jQuery('#menu-main-menu > .menu-item-has-children a').click(function() {
  jQuery(this).siblings('.first-sub').slideToggle();
  jQuery(this).closest('.menu-item-has-children').siblings().find('.sub-menu').slideUp();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-menu">
  <li class="menu-item-has-children"><a>parent link</a>
    <ul class="sub-menu">
      <li><a href="#">child link</a>
      </li>
      <li><a href="#">child link</a>
      </li>
    </ul>
  </li>

  <li class="menu-item-has-children"><a>parent link</a>
    <ul class="sub-menu">
      <li><a href="#">child link</a>
      </li>
      <li><a href="#">child link</a>
      </li>
    </ul>
  </li>
</ul>

来源：https://stackoverflow.com/questions/41045593/slide-toggle-other-submenus-when-a-submenu-opens

标签

jquery

html