Bootstrap5 多级dropdown

<div class="dropdown">
<a class="btn dropdown-toggle"> Dropdown link </a>
<ul class="dropdown-menu">
<div class="dropdown-item dropdown">
<a class="btn dropdown-toggle"> Dropdown link </a>
<ul class="dropdown-menu">
<div class="dropdown-item dropdown">
<a class="btn dropdown-toggle"> Dropdown link </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Action</a></li>
<li><a class="dropdown-item">Another action</a></li>
<li>
<a class="dropdown-item">Something else here</a>
</li>
</ul>
</div>
</ul>
</div>
</ul>
</div>
document.querySelectorAll('.dropdown .dropdown-toggle').forEach((a) => {
let dropdown: bootstrap.Dropdown;
a.addEventListener('click', (e) => {
const show = a.classList.contains('show');
if (show) {
a.classList.remove('show');
dropdown.hide();
} else {
a.setAttribute('data-bs-toggle', 'dropdown');
dropdown.show();
a.removeAttribute('data-bs-toggle');
}
});
dropdown = new bootstrap.Dropdown(a);
});
.dropdown.dropdown-item:active {
background-color: inherit;
}
Bootstrap5 多级dropdown的更多相关文章
- MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
- jQuery制作水平多级下拉菜单
本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...
- django权限二(多级菜单的设计以及展示)
多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...
- BS3 多级菜单
<div class="container"> <div class="row"> <h2>Multi level drop ...
- bootstrap多级下拉菜单
只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...
- bootstrap 多级联动下拉框
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- 【Bootstrap5】精细学习记录
[Bootstrap5]精细学习记录 Bootstrap模板 <!DOCTYPE html> <html> <head> <title>Bootstra ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- EXCEL中多级分类汇总空白字段填充
使用场景,多级分类汇总后,在汇总的字段中显示空白,这样对我们直接取值做表带来十分不更(假像有5000条记录,1000条汇总项) 相关技术,INDIRECT函数,单元格定位功能. 在数据区域外任意一个单 ...
随机推荐
- 实现一个List集合中的某个元素的求和
List<User> userlist = userService.findAll();Integer sum= userlist .stream().collect(Collectors ...
- Flash 终将谢幕:微软将于年底停止对 Flash 的支持
近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新.早在 2017 ...
- LOJ10019生日蛋糕
Mr.W 要制作一个体积为 N*π 的 M 层生日蛋糕,每层都是一个圆柱体. 设从下往上数第 i 蛋糕是半径为 R_i,高度为 H_i 的圆柱.当 i<M 时,要求 R_i>R_{i+1} ...
- Python 中 sorted 如何自定义比较逻辑
在 Python 中对一个可迭代对象进行排序是很常见的一个操作,一般会用到 sorted() 函数 num_list = [4, 2, 8, -9, 1, -3] sorted_num_list = ...
- socket套接字编程(1)——基本函数
TCP交互流程: 服务器:1. 创建socket:2. 绑定socket和端口号:3. 监听端口号:4. 接收来自客户端的连接请求:5. 从socket中读取字符:6. 关闭socket. 客户端:1 ...
- fedora 20安装vim Transaction check error
Transaction check error安装时 yum remove vim-minimal 再安装vim ok
- docker(8)Dockerfile指令介绍
前言 Dockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明. Dockerfile简介 Dockerfile是用来构建Docker镜像的构建文件,是由一系列 ...
- Pytest(3)fixture的使用
fixture的优势 Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进: 命名方式灵活,不局限于 setup 和teardown 这几个命名 conf ...
- sql语句定义和执行顺序
sql语句定义的顺序 (1) SELECT (2)DISTINCT<select_list> (3) FROM <left_table> (4) <join_type&g ...
- Educational Codeforces Round 43
Educational Codeforces Round 43 A. Minimum Binary Number 显然可以把所有\(1\)合并成一个 注意没有\(1\)的情况 view code / ...