Как закрыть несколько подменю при нажатии на подменю любого другого родительского меню или того же подменю

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

Я выяснил проблему.Я делюсь решением, если кто-то еще сталкивается с той же проблемой, что и я.

Я изменил последнюю седьмую строку на parent-parent и добавил открытый класс.также проверил это, если у меня есть подменю 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')
} 
});