Bootstrap5 Navbar多级下拉框

实现目标：

1、访问 Bootstrap5-navbar

2、修改dropdown为多级

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script></head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li><li class="nav-item dropdown drop-down02"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li><li class="nav-item dropdown drop-down02"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li><li class="nav-item dropdown drop-down02"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></li></ul></li></ul></li></ul></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div>
</nav></body>
</html>

3、完成之后访问

这时如果你点击第二个dropdown，它是不会展开内容的，因为我们自定义了多级dropdown，而bootstrap5只定义了单个dropdown点击事件，此时就要解决问题。继续。。。

4、处理多级dropdown点击事件

这里我提供一个js脚本文件，引入脚本文件就能实现。

bootstrap5-dropdown.js

(function($bs) {const CLASS_NAME = 'has-child-dropdown-show';$bs.Dropdown.prototype.toggle = function(_orginal) {return function() {document.querySelectorAll('.' + CLASS_NAME).forEach(function(e) {e.classList.remove(CLASS_NAME);});let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {dd.classList.add(CLASS_NAME);}return _orginal.call(this);}}($bs.Dropdown.prototype.toggle);document.querySelectorAll('.dropdown').forEach(function(dd) {dd.addEventListener('hide.bs.dropdown', function(e) {if (this.classList.contains(CLASS_NAME)) {this.classList.remove(CLASS_NAME);e.preventDefault();}if(e.clickEvent && e.clickEvent.composedPath().some(el=>el.classList && el.classList.contains('dropdown-toggle'))){e.preventDefault();}e.stopPropagation(); // do not need pop in multi level mode});});// for hoverfunction getDropdown(element) {return $bs.Dropdown.getInstance(element) || new $bs.Dropdown(element);}document.querySelectorAll('.dropdown-hover, .dropdown-hover-all .dropdown').forEach(function(dd) {dd.addEventListener('mouseenter', function(e) {let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');if (!toggle.classList.contains('show')) {getDropdown(toggle).toggle();}});dd.addEventListener('mouseleave', function(e) {let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');if (toggle.classList.contains('show')) {getDropdown(toggle).toggle();}});});})(bootstrap);

5、访问看看

看看显示有点丑，美化一下

6、美化dropdown

自定义样式

分别找到dropdown修改关键内容：

  <li class="nav-item dropdown drop-down02">

 <ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown">

自定义样式文件：style.css

.drop-down02{position:relative;
}
.drop-down02 .sub-menu02
{position: absolute !important;left: 100%;top: 0;
}.drop-down02 .dropdown-toggle{padding:.25rem 1.1rem !important;
}@media screen and (max-width :767px)
{.drop-down02 .sub-menu02{position:static !important;}
}

7、完整代码

index.html

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script><link rel="stylesheet" href="/static/css/style.css" /> 
</head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li><li class="nav-item dropdown drop-down02"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li><li class="nav-item dropdown drop-down02"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li><li class="nav-item dropdown drop-down02"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu sub-menu02" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></li></ul></li></ul></li></ul></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div>
</nav><!-- 这里 引入 bootstrap5-dropdown.js  -->
<script src="/static/js/bootstrap5-dropdown.js"></script> 
</body>
</html>

style.css

.drop-down02{position:relative;
}
.drop-down02 .sub-menu02
{position: absolute !important;left: 100%;top: 0;
}.drop-down02 .dropdown-toggle{padding:.25rem 1.1rem !important;
}@media screen and (max-width :767px)
{.drop-down02 .sub-menu02{position:static !important;}
}

bootstrap5-dropdown.js

(function($bs) {const CLASS_NAME = 'has-child-dropdown-show';$bs.Dropdown.prototype.toggle = function(_orginal) {return function() {document.querySelectorAll('.' + CLASS_NAME).forEach(function(e) {e.classList.remove(CLASS_NAME);});let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {dd.classList.add(CLASS_NAME);}return _orginal.call(this);}}($bs.Dropdown.prototype.toggle);document.querySelectorAll('.dropdown').forEach(function(dd) {dd.addEventListener('hide.bs.dropdown', function(e) {if (this.classList.contains(CLASS_NAME)) {this.classList.remove(CLASS_NAME);e.preventDefault();}if(e.clickEvent && e.clickEvent.composedPath().some(el=>el.classList && el.classList.contains('dropdown-toggle'))){e.preventDefault();}e.stopPropagation(); // do not need pop in multi level mode});});// for hoverfunction getDropdown(element) {return $bs.Dropdown.getInstance(element) || new $bs.Dropdown(element);}document.querySelectorAll('.dropdown-hover, .dropdown-hover-all .dropdown').forEach(function(dd) {dd.addEventListener('mouseenter', function(e) {let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');if (!toggle.classList.contains('show')) {getDropdown(toggle).toggle();}});dd.addEventListener('mouseleave', function(e) {let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');if (toggle.classList.contains('show')) {getDropdown(toggle).toggle();}});});})(bootstrap);