javascript - 如何在具有多级下拉子菜单的 Bootstrap v4 中实现导航栏下拉悬停?
问题描述
我需要修改以下代码,以便鼠标悬停在带有 Bootstrap 4 和 JQuery 的菜单中的多个级别上工作。当菜单只有一个级别时,鼠标悬停工作,但在打开第一级后,它也会打开第二个(下拉子菜单)。
这是我的HTML代码...
<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>
这里是我的JS代码...
//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");
});
});
})
}
});
推荐阅读
- c# - 保存按钮适用于“默认”结果集,但不适用于过滤结果集
- javascript - 在 nodejs 中排序不稳定,对内存使用有影响吗?
- scheme - 一个 `cond` 也是一个 `let`?
- botframework - 如何让机器人只向某些人发送消息
- google-cloud-platform - 获取使用资源的服务帐户
- python - 预填充 Flask SQLAlchemy 数据库
- swift - 在一个字符串中多次使用 NSAttributedString
- azure-application-gateway - Restrict access of the back-end pool form application gateway public ip
- python - 当我在文件中写入元组时,我在控制台中打印时丢失了一些值,我得到了所有值
- wso2 - SourceHandler Writer 调用informWriterError 时为null,无法工作