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函数,单元格定位功能. 在数据区域外任意一个单 ...
随机推荐
- TCP/IP中的Payload概念以及由此引申出的一些问题
TCP报文一次性最大运输的货物量(Payload),大体可以这么来计算: IP报文头长度 + TCP报文头长度 + Payload长度 ≤ MTU 即左边的三者之和,要小于等于右边MTU的长 ...
- 【LinxuShell】tar命令的用法
- Golang 版的ssh爆破小工具
源码如下: package main import ( "bufio" "flag" "fmt" "golang.org/x/cr ...
- Geospark-属性字段处理
Geospark将从shapefile.csv等格式文件以及DataFrame中的读取的字段保存到了Geometry的userData字段中,可以通过调用.getUserData()方法获取,他会返回 ...
- Java使用反射的通用数组复制方法
Java通用数组复制方法 在Arrays工具类中,提供了一个copyOf(T[] original, int newLength)方法,用于复制任意类型的对象数组,但是由于泛型不能作用于基本类型,所以 ...
- MySQL的安装、改密及远程连接
一.下载MySQL压缩包后的安装步骤 将压缩包解压到指定的目录 编辑好配置文件 [mysql] #设置MySQL客户端默认字符集 default-character-set=utf8 [mysqld] ...
- P3376 [模板] 网络最大流
https://www.luogu.org/blog/ONE-PIECE/wang-lao-liu-jiang-xie-zhi-dinic EK 292ms #include <bits/std ...
- AtCoder Beginner Contest 164
比赛链接:https://atcoder.jp/contests/abc164 A - Sheep and Wolves #include <bits/stdc++.h> using na ...
- C++中流操作符<<重载的实现
一.继承fstream后重载其<< 注意:重载函数中不能直接使用参数中的流out,否则会出现递归出错. class CLogStream : public ofstream { publi ...
- bochs 调试 com 文件 magicbreak
参考 https://blog.csdn.net/housansan/article/details/41833581 在网上看到2中解决此问题的方法:1.使用dos下的debug32工具单步跟踪pm ...