Это нестандартное Bootstrap 4 меню с 3 уровнями. Меню третьего уровня управляются jQuery, и проблема в том, что они остаются открытыми после закрытия верхнего элемента меню. Я также использую jQuery, чтобы убрать необходимость нажимать на меню, чтобы отобразить подменю. Это своего рода беспорядок. И я действительно не могу изменить HTML, поскольку он выводится с помощью меню.
Вопрос: как мне закрыть все элементы выпадающего меню и их подменю (например, 27028), когда элемент меню верхнего уровня ( 3381) закрыто?
Вопрос: А как я могу удалить лишний щелчок по пункту меню (например, 27028), чтобы показать элементы подменю?
Вот скрипка: https://jsfiddle.net/s04ezjhr/
<ul id="menu-main-menu-admin" class="navbar-nav"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3381" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children nav-item menu-item-3381 dropdown">
<a title="Human Resources" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle" aria-haspopup="true">Human Resources <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27077" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27077"><a title="Test Link" href="#" class="dropdown-item">Test Link</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27028" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27028 dropdown"><a title="HR Reports" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle" aria-haspopup="true">HR Reports <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27029" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27029"><a title="Change Of Status" href="https://example.com/change-of-status/" class="dropdown-item">Change Of Status</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27031" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27031"><a title="Failure To Start" href="https://example.com/failure-to-start/" class="dropdown-item">Failure To Start</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27032" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27032"><a title="Intent To Hire" href="https://example.com/intent-to-hire/" class="dropdown-item">Intent To Hire</a></li>
</ul>
</li>
</ul>
Это jQuery, который в настоящее время контролирует элементы меню третьего уровня и подменю «show on hover»:
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
function toggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);