Question

您好我有一个带子菜单的移动菜单。我已经设置好并且正常工作但我想添加另一个功能。

我希望如此，当子菜单打开，并且用户点击打开另一个子菜单时，第一个子菜单会折叠（或关闭）。

这是基本的html结构：

<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>

这是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();
});

因此，当一个子菜单打开时，用户打开另一个子菜单。第一个切换关闭。我尝试使用

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

但那没用。

有什么建议吗？

Answer 1

在父.sub-menu元素的兄弟中获取.menu-item-has-children，然后将其向上滑动。

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>

当子菜单打开时，滑动切换其他子菜单

1 个答案: