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

8、最终访问页面

 

 

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

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

相关文章

(7) cmake 编译C++程序(二)

(7) cmake 编译C++程序(二)

文章目录 概要整体代码结构整体代码小结 概要 在ubuntu下&#xff0c;通过cmake编译一个稍微复杂的管理程序 整体代码结构 整体代码 boss.cpp #include "boss.h"Boss::Boss(int id, string name, int dId) {this->Id id;this->Name name;this->DeptId …
阅读更多...
05 HTTP Tomcat Servlet

05 HTTP Tomcat Servlet

文章目录 HTTP1、简介2、请求数据格式3、响应数据格式 Tomcat1、简介2、基本使用3、Maven创建Web项目4、IDEA使用Tomcat Servlet1、简介2、方法介绍3、体系结构4、urlPattern配置5、XML配置 HTTP 1、简介 HTTP概念 HyperText Transfer Protocol&#xff0c;超文本传输协议&am…
阅读更多...
鸿蒙 动态共享包HSP的创建和引用

鸿蒙 动态共享包HSP的创建和引用

1.什么是动态共享包HSP HSP&#xff08;Harmony Shared Package&#xff09;是动态共享包&#xff0c;可以包含代码、C库、资源和配置文件&#xff0c;通过HSP可以实现代码和资源的共享。HSP不支持独立发布&#xff0c;而是跟随其宿主应用的APP包一起发布&#xff0c;与宿主应…
阅读更多...
【Django5】模板引擎

【Django5】模板引擎

系列文章目录 第一章 Django使用的基础知识 第二章 setting.py文件的配置 第三章 路由的定义与使用 第四章 视图的定义与使用 第五章 二进制文件下载响应 第六章 Http请求&HttpRequest请求类 第七章 会话管理&#xff08;Cookies&Session&#xff09; 第八章 文件上传…
阅读更多...
redis的学习（三）：Java客户端jedis的例子和SpringDataRedis的简介

redis的学习（三）：Java客户端jedis的例子和SpringDataRedis的简介

简介 Java客户端jedis的例子和SpringDataRedis的简介## Java客户端 常用的Java客户端有jedis&#xff0c;lettuce&#xff0c;redission。 优缺点&#xff1a; jedis简单实用&#xff0c;api名是redis的命令&#xff0c;学习成本低。不过jedis实例的线程是不安全的&#xff…
阅读更多...
VideoAgent: Long-form Video Understanding with Large Language Model as Agent

VideoAgent: Long-form Video Understanding with Large Language Model as Agent

VideoAgent: Long-form Video Understanding with Large Language Model as Agent 基本信息 博客贡献人 燕青 作者 Xiaohan Wang, Yuhui Zhang, et al. 标签 Large Language Model Agent, Long-form Video Understanding, Vision-Language Foundation Models 摘要 长视…
阅读更多...
Android中systrace配置及注意问题

Android中systrace配置及注意问题

Android中systrace配置及注意问题 systrace配置的官方文档地址如下&#xff1a;优化启动时间 Systrace systrace 允许在启动期间收集内核和 Android 跟踪记录。systrace 的可视化可以帮助分析启动过程中的具体问题。&#xff08;不过&#xff0c;如果要查看整个启动过程中的平…
阅读更多...
2024.7.22 作业

2024.7.22 作业

1.将双向链表和循环链表自己实现一遍&#xff0c;至少要实现创建、增、删、改、查、销毁工作 循环链表 looplinklist.h #ifndef LOOPLINKLIST_H #define LOOPLINKLIST_H#include <myhead.h>typedef int datatype;typedef struct Node {union {int len;datatype data;}…
阅读更多...
win10开启Linux子系统

win10开启Linux子系统

打开win10开发人员模式&#xff0c;在设置–>更新和安全–>针对开发人员&#xff0c;中勾选开发人员模式。 然后在控制面板中勾选添加Linux子系统。依次进入控制面板–>程序–>启用或关闭windows功能&#xff0c;勾选适用于windows的linux的子系统&#xff0c;点击…
阅读更多...
Mac清理垃圾的软件有哪些 怎么清理电脑上的缓存文件和垃圾清理

Mac清理垃圾的软件有哪些 怎么清理电脑上的缓存文件和垃圾清理

如果你发现你的Mac运行速度开始慢如蜗牛&#xff0c;或者硬盘空间快速减少&#xff0c;那么可能是时候使用一款好的清理软件来“洗个澡”了。市场上有许多优秀的Mac清理软件&#xff0c;包括一些出色的国产软件和国际知名软件。那么&#xff0c;mac电脑清理垃圾的软件有哪些&am…
阅读更多...
Java---后端文件上传详解

Java---后端文件上传详解

袁门才俊志高远&#xff0c; 震古烁今意决然。 风采翩翩才情显&#xff0c; 雄姿英发立世间。 目录 一&#xff0c;简单案例演示 二&#xff0c;服务器本地存储 三&#xff0c;配置单个文件上传大小限制 一&#xff0c;简单案例演示 首先简单编写一个前端网页&#xff1a; &l…
阅读更多...
知识图谱：知识图谱概述（一）

知识图谱：知识图谱概述（一）

一、知识图谱简介 知识图谱&#xff0c;是结构化的语义知识库&#xff0c;主要用于描述现实世界中的实体及其相互关系&#xff0c;由节点和边组成。节点可以是实体&#xff0c;如汽车、街道等&#xff0c;或是抽象的概念&#xff0c;如AI、疾病等。边可以是实体的属性&#xff…
阅读更多...
基于FPGA的以太网设计（2）----以太网的硬件架构（MAC+PHY）

基于FPGA的以太网设计（2）----以太网的硬件架构（MAC+PHY）

1、概述 以太网的电路架构一般由MAC、PHY、变压器、RJ45和传输介质组成，示意图如下所示： 需要注意的是，上图是一个简化了的模型，它描述的是两台主机之间的直接连接，但在实际应用中基本都是多台主机构成的局域网，它们之间并不直接相连，而是通过交换机Switch来进行…
阅读更多...
【PPT把当前页输出为图片】及【PPT导出图片模糊】的解决方法（sci论文图片清晰度）

【PPT把当前页输出为图片】及【PPT导出图片模糊】的解决方法（sci论文图片清晰度）

【PPT把当前页输出为图片】及【PPT导出图片模糊】的解决方法 内容一&#xff1a;ppt把当前页输出为图片&#xff1a;内容二&#xff1a;ppt导出图片模糊的解决方法&#xff1a;方法&#xff1a;步骤1&#xff1a;打开注册表编辑器步骤2&#xff1a;修改注册表&#xff1a; 该文…
阅读更多...
万字长文之分库分表里无分库分表键如何查询【后端面试题 | 中间件 | 数据库 | MySQL | 分库分表 | 其他查询】

万字长文之分库分表里无分库分表键如何查询【后端面试题 | 中间件 | 数据库 | MySQL | 分库分表 | 其他查询】

在很多业务里&#xff0c;分库分表键都是根据主要查询筛选出来的&#xff0c;那么不怎么重要的查询怎么解决呢&#xff1f; 比如电商场景下&#xff0c;订单都是按照买家ID来分库分表的&#xff0c;那么商家该怎么查找订单呢&#xff1f;或是买家找客服&#xff0c;客服要找到对…
阅读更多...
深入浅出WebRTC—ULPFEC

深入浅出WebRTC—ULPFEC

FEC 通过在发送端添加额外的冗余信息&#xff0c;使接收端即使在部分数据包丢失的情况下也能恢复原始数据&#xff0c;从而减轻网络丢包的影响。在 WebRTC 中&#xff0c;FEC 主要有两种实现方式&#xff1a;ULPFEC 和 FlexFEC&#xff0c;FlexFEC 是 ULPFEC 的扩展和升级&…
阅读更多...
websocket实现进度条

websocket实现进度条

websocket实现进度条 做一个简易的websocket实现进度条的练习&#xff0c;效果如下&#xff1a; 前端vue3 <template><el-progress type"circle" :percentage"this.progressValue" :status"this.perstatus" /><el-button cli…
阅读更多...
docker tomcat 404

docker tomcat 404

HTTP 404状态码表示“Not Found”&#xff0c;即服务器无法找到请求的页面。 当用户尝试访问一个不存在的网页时&#xff0c;服务器会返回这个状态码。这个状态码是HTTP协议的一部分&#xff0c;用于告知客户端&#xff08;通常是浏览器&#xff09;服务器无法完成请求。404状…
阅读更多...
黑马JavaWeb企业级开发（知识清单）02——HTML实现标题：样式（CSS引入、CSS选择器、span标签）和超链接

黑马JavaWeb企业级开发（知识清单）02——HTML实现标题：样式（CSS引入、CSS选择器、span标签）和超链接

文章目录 前言一、标题样式1&#xff1a;新闻标题颜色1. CSS三种引入方式2. 颜色表示3. javacode实现 二、标题样式2&#xff1a;发布时间颜色1. < span >标签2. CSS选择器1&#xff09;元素&#xff08;标签&#xff09;选择器&#xff08;优先级最低&#xff09;2&…
阅读更多...
IC秋招RTL代码合集

IC秋招RTL代码合集

一 全加器和半加器 全加器 module full_adder1(input Ai, Bi, Ci,output So, Co);assign So Ai ^ Bi ^ Ci ;assign Co (Ai & Bi) | (Ci & (Ai | Bi)); endmodule module full_adder1(input Ai, Bi, Cioutput So, Co);assign {Co, So} Ai Bi Ci ; endm…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023