如何在单击任何其他父菜单的子菜单或相同的子菜单时关闭多个子菜单

Question

我想知道如何在点击任何其他父菜单的子菜单或相同的子菜单时关闭多个子菜单。

我到目前为止编写了代码并在某种程度上工作。现在，问题是当我试图切换多个子菜单时，它正在关闭菜单本身。

我粘贴下面的代码：

<ul id="menu-test-one-column-menu" class="nav"><li><a onclick="event.preventDefault();" href="#javascript:void(0);" class="backtomenu" style="display: none;">Back</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children drop-down" style="height: auto;"><a href="#javascript:void(0);">About Us<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
<ul class="sub-menu">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#about-us/">Who We Are</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#executive-team/">Leadership Team</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children drop-down" style="height: auto;"><a href="#javascript:void(0);">Corporate Travel<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#corporate-travel/">Managed Travel</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Program Management<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
	<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#corporate-travel-policy/">Travel Policy</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#account-management/">Account Management</a></li>
	</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Travel Technology<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
	<ul class="sub-menu" style="">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#online-travel-booking-tools/">Online Booking Tools</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#vision-links/">Travel Portal</a></li>
	</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Traveller Experience<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
	<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#vision-24/">24/7 Support</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#travel-team/">Travel Team</a></li>
	</ul>
</li>

</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page" style="height: auto;"><a href="#vacations/">Vacations</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children drop-down" style="height: auto;"><a href="#javascript:void(0);">Additional Services<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
<ul class="sub-menu">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#loyalty-travel/">Loyalty Travel</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#meetings/">Corporate Meetings</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children drop-down" style="height: auto;"><a href="#javascript:void(0);">Get In Touch<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#contact/">Contact</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children vtcart-icon"><a href="#javascript:void(0);">Locations<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
	<ul class="sub-menu open" style="">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#find-a-location/">Find a Location</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Alberta<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
		<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/airdrie/">Airdrie</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/calgary-canada-place/">Calgary Canada Place</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/calgary-crowfoot/">Calgary Crowfoot</a></li>
		</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">British Columbia<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
		<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/kamloops/">Kamloops</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/richmond/">Richmond</a></li>
		</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Manitoba<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
		<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/brandon/">Brandon</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/winnipeg/">Winnipeg</a></li>
		</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Ontario<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
		<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/ancaster/">Ancaster</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/brantford/">Brantford</a></li>
		</ul>
</li>
<li class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Quebec<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
		<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/montreal/">Montreal</a></li>
		</ul>
</li>
<li class=" menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#javascript:void(0);">Saskatchewan<span class="cart-icon"> <img src="wp-content/themes/Divi-Child/cart-icon.png"> </span></a>
		<ul class="sub-menu" style="">
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/moose-jaw/">Moose Jaw</a></li>
<li class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="#locations/north-battleford/">North Battleford</a></li>
		</ul>
</li>
	</ul>
</li>
</ul>
</li>
</ul>

jQuery(document).on('click', '.menu-item-has-children a', function(e) {
//e.preventDefault();
jQuery(this).next().toggleClass("open");
jQuery(this).parent().toggleClass("vtcart-icon");

//                    jQuery(this).next('> ul ul').slideToggle();
if (jQuery(this).closest('li').parent().hasClass('open')) {
   jQuery(this).closest('li').parent().parent().addClass('vtcart-icon');
}
jQuery(this).parents('li').eq(0).siblings().each(function() {
   var _toggle = jQuery(this).find('> .sub-menu').eq(0);
   if (_toggle.hasClass("open")) {
      _toggle.removeClass("open");
      jQuery(this).find('>li').eq(0).slideToggle();

   }
});
if (jQuery(this).parent().find('> .sub-menu').hasClass('open')) {
   jQuery(this).parent('li').addClass('vtcart-icon');
} else {
   jQuery(this).parent('li').removeClass('vtcart-icon');
}
jQuery('.sub-menu').not(jQuery(this).next('ul')).removeClass('open');
$menuit = jQuery(this).parent('li').children('ul:nth-child(2)');
jQuery('.sub-menu').not($menuit).removeClass('open');
if ($menuit.hasClass('open')) {
   jQuery(this).next().addClass("open");
   jQuery(this).parent().parent().addClass('open');
   jQuery(this).parent().addClass('open');
}

});

Answer 1

我已经弄明白了这个问题。如果其他人也面临与我相同的问题，我正在分享解决方案。

我已将最后的第7行更改为父级 - 父级，并将该类添加到其中。如果我有3级子菜单也检查它

仅为该行编写代码。

if (jQuery(this).parent('li').parent('ul').parent('li').parent('ul.sub-menu').length == 1) {
                        jQuery(this).parent('li').parent('ul').addClass('open')
                    }

现在整个代码都是

jQuery(document).on('click', '.menu-item-has-children a', function (e) {

jQuery(this).next().toggleClass("open");
 jQuery(this).parent().toggleClass("vtcart-icon");

jQuery("li").removeClass("vtcart-icon");
if (jQuery(this).closest('li').parent().hasClass('open')) {
jQuery(this).closest('li').parent().parent().addClass('vtcart-icon');
}
                 jQuery(this).parents('li').eq(0).siblings().each(function () {
 var _toggle = jQuery(this).find('> .sub-menu').eq(0);
if (_toggle.hasClass("open")) {
 _toggle.removeClass("open");
                            jQuery(this).find('>li').eq(0).slideToggle();
}
});
if (jQuery(this).parent().find('> .sub-menu').hasClass('open')) {
jQuery(this).parent('li').addClass('vtcart-icon');
} else {                      jQuery(this).parent('li').removeClass('vtcart-icon');
 }
jQuery('.sub-menu').not(jQuery(this).next('ul')).removeClass('open');
if(jQuery(this).parent('li').parent('ul').parent('li').parent('ul.sub-menu').length == 1) {  jQuery(this).parent('li').parent('ul').addClass('open')
} 
});