【发布时间】：2020-03-17 14:49:54
【问题描述】：
这是一个非标准的 Bootstrap 4 菜单，有 3 个级别。三级菜单由 jQuery 控制，问题是在顶部菜单项关闭后它们仍保持打开状态。我还使用 jQuery 来消除单击菜单以显示子菜单的需要。这有点乱。而且我无法真正更改 HTML，因为它是由 menu walker 输出的。
问题：当顶级菜单项 (3381) 关闭时，如何关闭所有弹出菜单项及其子菜单（如 27028）？
问题：以及如何删除对菜单项（如 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：
$('.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);
【问题讨论】：
-
你可以创建 JSFiddle 示例吗？
-
谢谢，这是一个小提琴：jsfiddle.net/s04ezjhr
标签： jquery css bootstrap-4