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，一经查实，立即删除！

相关文章

【DevOps系列】构建Devops系统

【DevOps系列】构建Devops系统

开始介绍 那就着手开始干吧。先介绍一下我们的工具链。 主要工具&#xff1a;GitHub、Jenkins、Kubernetes、Ansible、Prometheus和JMeter 着手动 1. 设置GitHub作为源代码仓库 登录GitHub: 打开浏览器并访问 https://github.com&#xff0c;使用您的GitHub账户登录。 创建…
阅读更多...
(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; 第八章 文件上传…
阅读更多...
【记录ubuntu22 安装ros1 noetic 与 ros2 humble共存】

【记录ubuntu22 安装ros1 noetic 与 ros2 humble共存】

记录ubuntu22 安装ros1 noetic 与 ros2 humble共存 基础环境介绍 qemu环境，目标系统是armv7l的32位系统，无法通过apt源安装上二进制的ros，所以只有编译安装ubuntu22 先安装ros2预先准备工作 更新系统源 # 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释…
阅读更多...
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;点击…
阅读更多...
java利用二进制数字字段存储信息

java利用二进制数字字段存储信息

前言 在做系统开发的时候&#xff0c;经常需要增加一些字段&#xff0c;但是增加字段的成本比较高&#xff0c;需要改动的地方比较多&#xff0c;所有一些状态标识可以使用已有的数字类型的扩展字段存储&#xff0c;减少改动成本。 原理 利用二进制的01标识类型信息&#xf…
阅读更多...
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; 该文…
阅读更多...
Perl语言入门学习指南

Perl语言入门学习指南

Perl语言入门学习指南 原文链接 Perl&#xff08;Practical Extraction and Report Language&#xff09;是一种强大的编程语言&#xff0c;因其在文本处理和系统管理任务中的高效性而广受欢迎。本文将逐步深入介绍Perl&#xff0c;从环境准备到编写代码&#xff0c;探讨其实…
阅读更多...
设计模式实战：图形编辑器的设计与实现

设计模式实战：图形编辑器的设计与实现

简介 本篇文章将介绍如何设计一个图形编辑器系统，系统包括图形对象的创建、组合、操作及撤销等功能。我们将通过这一项目，应用命令模式、组合模式和备忘录模式来解决具体的设计问题。 问题描述 设计一个图形编辑器系统，用户可以创建并操作图形对象，将多个图形对象组合成…
阅读更多...
JavaScript导入导出excel

JavaScript导入导出excel

在JavaScript的浏览器环境下导入和导出Excel文件&#xff0c;主要可以通过一些库来帮助我们简化操作&#xff0c;比如SheetJS&#xff08;也称为xlsx库&#xff09;和FileSaver.js。以下是如何使用这些库来实现Excel的导入和导出的基本步骤&#xff1a; 导入Excel 导入Excel文…
阅读更多...
最新文章

Copyright @ 2022~2023