Javascript 如何在具有多级下拉子菜单的引导v4中实现导航栏下拉悬停?
我需要修改以下代码,以便mousehover可以在具有bootstrap4和JQuery的菜单中使用多个级别。当菜单只有一个级别时,鼠标悬停工作,但在打开第一个级别后,它还会打开第二个级别(下拉子菜单) 这里是我的HTML代码Javascript 如何在具有多级下拉子菜单的引导v4中实现导航栏下拉悬停?,javascript,twitter-bootstrap,hover,dropdown,multi-level,Javascript,Twitter Bootstrap,Hover,Dropdown,Multi Level,我需要修改以下代码,以便mousehover可以在具有bootstrap4和JQuery的菜单中使用多个级别。当菜单只有一个级别时,鼠标悬停工作,但在打开第一个级别后,它还会打开第二个级别(下拉子菜单) 这里是我的HTML代码 <nav class="navbar navbar-expand-lg navbar-default fixed-top"> <div class="container"> <a class="navbar-brand
<nav class="navbar navbar-expand-lg navbar-default fixed-top">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" alt="Brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-primary"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="item1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item 1 <small><i class="fas fa-angle-down ml-1"></i></small>
</a>
<ul class="dropdown-menu p-0" aria-labelledby="item1">
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li><a class="dropdown-item " href="">Item Level 1</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="item2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item 2 <small><i class="fas fa-angle-down ml-1"></i></small>
<div class="ripple-container"></div></a>
<ul class="dropdown-menu p-0" aria-labelledby="item2">
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li class="dropdown-submenu">
<a class="nav-link dropdown-toggle dropdown-item" href="#" role="button" id="itemlevel1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item Level 1 <small><i class="fas fa-angle-right"></i></small>
</a>
<ul class="dropdown-menu p-0" aria-labelledby="itemlevel1">
<li><a class="dropdown-item " href="">Item Level 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href="">Item 3
</a>
</li>
</ul>
</div>
</div>
</nav>
//Dropdown hover
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const $dropdownSubMenu = $(".dropdown-submenu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
$this.find($dropdownSubMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
$this.find($dropdownSubMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
解决方案:
//Dropdown hover
const $dropdown = $(".navbar-nav > .dropdown");
const $dropdownToggle = $(".navbar-nav > .dropdown > .dropdown-toggle");
const $dropdownMenu = $(".navbar-nav > .dropdown > .dropdown-menu");
const $dropdown2 = $(".dropdown-submenu");
const $dropdownToggle2 = $(".dropdown-submenu > .dropdown-toggle");
const $dropdownMenu2 = $(".dropdown-submenu > .dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
$dropdown2.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle2).attr("aria-expanded", "true");
$this.find($dropdownMenu2).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle2).attr("aria-expanded", "false");
$this.find($dropdownMenu2).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
$dropdown2.off("mouseenter mouseleave");
$(function () {
// Multi Level dropdowns on Click for Mobile
$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function (event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings().toggleClass("show");
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
$('.dropdown-submenu .show').removeClass("show");
});
});
})
}
});