Bootstrap5 Navbar多级下拉框

news2024/11/25 5:02:26

实现目标：

 

 

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 hover
			function 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 hover
			function 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);

8、最终访问页面

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1941837.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

视频汇聚平台EasyCVR启动出现报错“cannot open shared object file”的原因排查与解决

视频汇聚平台EasyCVR启动出现报错“cannot open shared object file”的原因排查与解决

安防视频监控EasyCVR安防监控视频系统采用先进的网络传输技术&#xff0c;支持高清视频的接入和传输&#xff0c;能够满足大规模、高并发的远程监控需求。EasyCVR平台支持多种视频流的外部分发&#xff0c;如RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、WebRTC、fmp4等&#xf…
阅读更多...
python实现图像特征提取算法1

python实现图像特征提取算法1

python实现Marr-Hildreth算法、Canny边缘检测器算法 1.Marr-Hildreth算法详解算法步骤公式Python 实现详细解释优缺点 2.Canny边缘检测器算法详解算法步骤公式Python 实现详细解释优缺点 1.Marr-Hildreth算法详解 Marr-Hildreth算法是一个用于图像边缘检测的经典算法&#xff…
阅读更多...
一些和颜色相关网站

一些和颜色相关网站

1.中国传统色 2.网页颜色选择器 3.渐变色网站 4.多风格色卡生成 5.波浪生成 6.半透明磨砂框
阅读更多...
基于3D开发引擎HOOPS平台的大型三维PLM系统的设计、开发与应用

基于3D开发引擎HOOPS平台的大型三维PLM系统的设计、开发与应用

产品生命周期管理&#xff08;Product Lifecycle Management&#xff0c;PLM&#xff09;系统在现代制造业中扮演着至关重要的角色。随着工业4.0和智能制造的推进&#xff0c;PLM系统从最初的CAD和PDM系统发展到现在的全面集成、协作和智能化的平台。本文将探讨基于HOOPS平台的…
阅读更多...
四大引用——强软弱虚

四大引用——强软弱虚

目录 一、强引用 二、软引用 三、弱引用 四、虚引用 一、强引用 强引用是在程序代码之中普遍存在的&#xff0c;类似于“Object obj new Object()”&#xff0c;obj变量引用Object这个对象&#xff0c;就叫做强引用。当内存空间不足&#xff0c;Java虚拟机宁愿抛出OutOfMe…
阅读更多...
乐鑫AWS IoT ExpressLink方案，简化物联网设备连接AWS IoT服务

乐鑫AWS IoT ExpressLink方案，简化物联网设备连接AWS IoT服务

在现代科技迅速发展的今天&#xff0c;物联网&#xff08;IoT&#xff09;已经成为连接物理世界与数字世界的重要桥梁&#xff0c;越来越多的设备开始接入网络&#xff0c;实现智能化控制。 在这个大背景下&#xff0c;乐鑫携手亚马逊&#xff0c;推出了AWS IoT ExpressLink方…
阅读更多...
【机器学习】机器学习解决的问题特点、机器学习学的是什么、怎么学、如何构建高效机器学习模型的策略、机器学习的分类以及机器学习、模式识别、数据挖掘和人工智能的区别

【机器学习】机器学习解决的问题特点、机器学习学的是什么、怎么学、如何构建高效机器学习模型的策略、机器学习的分类以及机器学习、模式识别、数据挖掘和人工智能的区别

引言 机器学习是人工智能的一个重要分支&#xff0c;主要解决的是如何通过算法让机器从数据中自动学习规律和知识&#xff0c;以完成特定任务或解决特定问题。 文章目录 引言一、机器学习解决的是什么样的问题1.2 数据驱动的预测问题1.3 数据理解与挖掘1.4 优化与决策问题1.5 异…
阅读更多...
一个简单好用安全的开源交互审计系统，支持SSH,Telnet,Kubernetes协议（带私活）

一个简单好用安全的开源交互审计系统，支持SSH,Telnet,Kubernetes协议（带私活）

前言 在当今的企业网络环境中&#xff0c;远程访问和交互审计成为了保障网络安-全的重要组成部分。然而&#xff0c;现有的解-决方案往往存在一些痛点&#xff0c;如复杂的配置、有限的协议支持、以及审计功能的不足。这些问题不仅增加了IT管理员的负担&#xff0c;也为企业的…
阅读更多...
泰迪智能科技携广州华商学院共讨产教融合，校企合作

泰迪智能科技携广州华商学院共讨产教融合，校企合作

7月19日&#xff0c;广州华商学院人工智能学院的领导及骨干教师一行莅临泰迪智能科技参观交流&#xff0c;广州华商学院人工智能学院院长助理杨本胜、院长助理洪绍勇、大数据系主任颜远海、金融数学系主任石金诚、人工智能系主任霍永良&#xff0c;以及骨干教师许丽娟、李志青、…
阅读更多...
二十、【机器学习】【非监督学习】- 均值漂移 (Mean Shift)

二十、【机器学习】【非监督学习】- 均值漂移 (Mean Shift)

系列文章目录 第一章 【机器学习】初识机器学习 第二章 【机器学习】【监督学习】- 逻辑回归算法 (Logistic Regression) 第三章 【机器学习】【监督学习】- 支持向量机 (SVM) 第四章【机器学习】【监督学习】- K-近邻算法 (K-NN) 第五章【机器学习】【监督学习】- 决策树…
阅读更多...
Electron 渲染进程直接调用主进程的API库@electron/remote引用讲解

Electron 渲染进程直接调用主进程的API库@electron/remote引用讲解

背景 remote是个老库&#xff0c;早期Electron版本中有个remote对象&#xff0c;这个对象可以横跨所有进程&#xff0c;随意通信&#xff0c;后来官方认为不安全&#xff0c;被干掉了&#xff0c;之后有人利用Electron的IPC通信&#xff0c;底层通过Promise的await能力&#x…
阅读更多...
Text Control 控件教程：使用 .NET C# 中的二维码和条形码增强文档

Text Control 控件教程：使用 .NET C# 中的二维码和条形码增强文档

QR 码和条形码非常适合为文档和 PDF 文件增加价值&#xff0c;因为它们提供轻松的信息访问、验证信息、跟踪项目和提高交互性。条形码可以弥补纸质或数字人类可读文档与网络门户或网络应用程序中的数字信息之间的差距。大多数用户都熟悉 QR 码和条形码&#xff0c;它们在许多过…
阅读更多...
Cannot perform upm operation: connect ETIMEDOUT 34.36.199.114:443 [NotFound]

Cannot perform upm operation: connect ETIMEDOUT 34.36.199.114:443 [NotFound]

版本&#xff1a;Unity 2018 Windows 问题&#xff1a;打开 Package Manager&#xff0c;加载报错 尝试解决&#xff1a; 删除项目文件里的Packages下的mainfest.json文件&#xff0c;然后重新打开项目&#xff08;X&#xff09;重新登录 Unity 账号&#xff08;X&#xff09…
阅读更多...
Http 和 Https 的区别（图文详解）

Http 和 Https 的区别（图文详解）

在现代网络通信中&#xff0c;保护数据的安全性和用户的隐私是至关重要的。HTTP&#xff08;Hypertext Transfer Protocol&#xff09;和 HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是两种常见的网络通信协议&#xff0c;但它们在数据保护方面的能力存在…
阅读更多...
立创梁山派--移植开源的SFUD万能的串行 Flash 通用驱动库

立创梁山派--移植开源的SFUD万能的串行 Flash 通用驱动库

SFUD是什么 关于SFUD库的介绍&#xff0c;其开源链接(gitee,github)已经详细的阐述了. 这里是截取自它的一部分介绍&#xff1a; SFUD 是一款开源的串行 SPI Flash 通用驱动库。由于现有市面的串行 Flash 种类居多&#xff0c;各个 Flash 的规格及命令存在差异&#xff0c; SF…
阅读更多...
Linux云计算 |【第一阶段】SERVICES-DAY5

Linux云计算 |【第一阶段】SERVICES-DAY5

主要内容&#xff1a; 源码编译安装、rsync同步操作、inotify实时同步、数据库服务基础 实操前骤&#xff1a;&#xff08;所需tools.tar.gz与users.sql&#xff09; 1.两台主机设置SELinnx和关闭防火墙 setenforce 0 systemctl stop firewalld.service //停止防火墙 sy…
阅读更多...
＜数据集＞水果识别数据集＜目标检测＞

＜数据集＞水果识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;10012张 标注数量(xml文件个数)&#xff1a;10012 标注数量(txt文件个数)&#xff1a;10012 标注类别数&#xff1a;7 标注类别名称&#xff1a;[Watermelon, Orange, Grape, Apple, peach, Banana, Pineapple] 序…
阅读更多...
常见的数据集格式

常见的数据集格式

常见的数据集格式有三种&#xff0c;分别为voc(xml)、coco(json)、yolo(txt)。 1 VOC VOC数据集由五个部分构成&#xff1a;JPEGImages&#xff0c;Annotations&#xff0c;ImageSets&#xff0c;SegmentationClass以及SegmentationObject. . └── VOC #根目…
阅读更多...
基于微信小程序+SpringBoot+Vue的微信平台签到系统(带1w+文档)

基于微信小程序+SpringBoot+Vue的微信平台签到系统(带1w+文档)

基于微信小程序SpringBootVue的微信平台签到系统(带1w文档) 基于微信小程序SpringBootVue的微信平台签到系统(带1w文档) 微信平台签到系统使用Java语言进行编码&#xff0c;使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务&#xff0c;其管理微信平台…
阅读更多...
使用Diffusion Models进行街景视频生成

使用Diffusion Models进行街景视频生成

Diffusion Models专栏文章汇总&#xff1a;入门与实战 前言&#xff1a;街景图生成相当有挑战性&#xff0c;目前的文本到视频的方法仅限于生成有限范围的场景的短视频&#xff0c;文本到3D的方法可以生成单独的对象但不是整个城市。除此之外街景图对一致性的要求相当高&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023