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函数,单元格定位功能. 在数据区域外任意一个单 ...
随机推荐
- 手把手教你定位常见Java性能问题
概述 性能优化一向是后端服务优化的重点,但是线上性能故障问题不是经常出现,或者受限于业务产品,根本就没办法出现性能问题,包括笔者自己遇到的性能问题也不多,所以为了提前储备知识,当出现问题的时候不会手忙 ...
- 济南学习D3T1__线性筛和阶乘质因数分解
[问题描述] 从1− N中找一些数乘起来使得答案是一个完全平方数,求这个完全平方数最大可能是多少. [输入格式] 第一行一个数字N. [输出格式] 一行,一个整数代表答案对100000007取模之后的 ...
- Java调用RestFul接口
使用Java调用RestFul接口,以POST请求为例,以下提供几种方法: 一.通过HttpURLConnection调用 1 public String postRequest(String url ...
- http、https比较
HTTP 超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据, 互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准. 设计HTTP的初衷是 ...
- Excel 如何使用 函数 实现传说中的 多条件中位数 (MEDIANIFS)?
数据科学交流群,群号:189158789,欢迎各位对数据科学感兴趣的小伙伴的加入! 实际上Excel中根本没有MEDIANIFS,但我们可以通过一些方式进行实现: 比如如下图的需求,需要求这一列中,1 ...
- 四:SpringBoot-定时任务和异步任务的使用方式
SpringBoot-定时任务和异步任务的使用方式 1.定时任务 2.同步和异步 3.定时器的使用 3.1 定时器执行规则注解 3.2 定义时间打印定时器 3.3 启动类开启定时器注解 4.异步任务 ...
- Maven多模块的2种依赖管理策略
在Maven多模块的时候,管理依赖关系是非常重要的,各种依赖包冲突,查询问题起来非常复杂,于是就用到了<dependencyManagement>, 示例说明, 在父模块中: <de ...
- Codeforces错题本
为什么我这么菜啊QAQ Codeforces 1364C
- Codeforces Global Round 8 B. Codeforces Subsequences(构造)
题目链接:https://codeforces.com/contest/1368/problem/B 题意 构造最短的至少含有 $k$ 个 $codeforces$ 子序列的字符串. 题解 如下表: ...
- 营业额统计 HYSBZ - 1588
营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额.分析营业情况 ...