<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的更多相关文章

  1. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

  2. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  3. django权限二(多级菜单的设计以及展示)

    多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...

  4. BS3 多级菜单

    <div class="container"> <div class="row"> <h2>Multi level drop ...

  5. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  6. bootstrap 多级联动下拉框

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  7. 【Bootstrap5】精细学习记录

    [Bootstrap5]精细学习记录 Bootstrap模板 <!DOCTYPE html> <html> <head> <title>Bootstra ...

  8. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  9. EXCEL中多级分类汇总空白字段填充

    使用场景,多级分类汇总后,在汇总的字段中显示空白,这样对我们直接取值做表带来十分不更(假像有5000条记录,1000条汇总项) 相关技术,INDIRECT函数,单元格定位功能. 在数据区域外任意一个单 ...

随机推荐

  1. Node.js 安全指南

    当项目周期快结束时,开发人员会越来越关注应用的"安全性"问题.一个安全的应用程序并不是一种奢侈,而是必要的.你应该在开发的每个阶段都考虑应用程序的安全性,例如系统架构.设计.编码, ...

  2. 十一:SpringBoot-事务管理

    SpringBoot-事务管理 1.事务管理简介 1.1 特性:ACID 1.2 隔离问题 1.3 隔离级别 2.Spring事务管理 2.1 顶级接口 2.2 事务状态 2.3 事务定义 1.事务管 ...

  3. 数据库MySQL——SQL语句(命令)

    SQL语句分类 DCL (Data Control Language):数据控制语言:用来管理用户及权限 DDL(Data Definition Language):数据定义语言:用来定义数据库对象: ...

  4. Linux常用命令:性能命令

    本文介绍Linux常用性能统计分析命令,监控进程或者系统性能.主要包括CPU(top.mpstat).内存(vmstat.free).I/O(iostat).网络性能(sar).系统日志信息(dems ...

  5. 2020 CCPC-Wannafly Winter Camp Day2

    2020 CCPC-Wannafly Winter Camp Day2 A 托米的字符串 虽然每个子串出现的概率是相同的,但是同一长度的子串个数是不同的,所以要分别处理.计算出某一长度的情况下,元音字 ...

  6. 2019 Multi-University Training Contest 1 A.Blank(dp)

    题意:现在要你构造一个只有{0,1,2,3} 长度为n且有m个限制条件的序列 问你方案数 思路:dp[i][j][k][now]分别表示四个数最后出现的位置 最后可以滚动数组 优化一下空间 ps:我的 ...

  7. hdu4501——小明系列故事——买年货(多维背包)

    题解: 思路:将v1,v2,k都当作一种体积,开三维dp数组,每种物品只能取一次 代码中的for循环是倒着进行的,知道01背包和完全背包的肯定明白,倒着进行的就代表每种物品只选择一次 代码: 1 #i ...

  8. Spring web之restTemplate超时问题处理

    问题 项目中有个远程服务因为某些原因会访问不通,于是就在调用的那一步挂起无法结束了. 查看代码 代码大概如下 CloseableHttpClient closeableHttpClient = Htt ...

  9. PowerShell随笔4---变量

    全局变量 输入$global:后按ctrl+space,我们就可以看到所有的全局变量. 比如我们可以查看PowerShell的版本: 我们可以在在编写脚本代码的时候使用这些变量,globle可以省略, ...

  10. UWP(一)开发入门

    异常问题总结 Your project file doesn't list 'win10' as a "RuntimeIdentifier". You should add 'wi ...