Bootstrap 5二级菜单不显示，首要检查data-bs-toggle属性是否写错；必须用data-bs-toggle="dropdown"，废弃data-toggle，且二级菜单需正确嵌套、添加position:relative等CSS，并用JS阻止事件冒泡。
Bootstrap 5 二级菜单不显示，首要检查 data-bs-toggle 属性是否写错
Bootstrap 5 彻底废弃了 data-toggle，所有交互组件必须用 data-bs-toggle="dropdown"。如果你在二级触发项（比如某个 <li class="dropdown-item">）上写了 data-toggle="dropdown" 或漏写该属性，JS 就不会为它初始化下拉逻辑——它压根不是“dropdown 触发器”，自然不会响应点击或 hover。
常见错误包括：
- 一级菜单用
data-bs-toggle，二级却沿用旧版的data-toggle - 二级项直接套用
<a>标签但没加任何data-bs-toggle，只靠 CSS:hover模拟，结果移动端失效、键盘导航不可用 - 二级容器（
<ul class="dropdown-menu">）不是dropdown-item的**直接子元素**，而是兄弟节点或嵌套过深，导致选择器失效、事件委托失败
二级菜单定位飞出屏幕，大概率缺 position: relative
Bootstrap 5 默认对 .dropdown-menu .dropdown-menu 设了 opacity: 0 和 visibility: hidden，纯 CSS :hover 只改 display 是无效的；更关键的是，若父级 .dropdown-item 没设 position: relative，子菜单的 left: 100% 就会相对于 <body> 定位，直接甩到视口外。
必须加的最小 CSS（不能省）：
.dropdown-item {
position: relative;
}
.dropdown-menu .dropdown-menu {
position: absolute;
top: 0;
left: 100%;
margin-top: -2px;
display: none;
}
.dropdown-item:hover > .dropdown-menu,
.dropdown-item:focus > .dropdown-menu {
display: block;
}
注意：> 是关键，确保只作用于直接子菜单，避免样式穿透影响深层嵌套。
移动端点开即收，是因为没拦截 click 冒泡
桌面端靠 :hover + :focus 能工作，但触摸设备和键盘用户需要 click 支持。如果二级菜单靠 JS 监听 click 切换 show 类，但没阻止事件冒泡，就会触发父级 dropdown 的自动收起逻辑，造成“点一下闪一下”。
推荐轻量 JS 补丁（仅需监听，不接管 hover）：
document.addEventListener('click', function(e) {
const toggle = e.target.closest('.dropdown-item[data-bs-toggle="dropdown"]');
if (toggle && toggle.nextElementSibling?.classList.contains('dropdown-menu')) {
e.preventDefault();
e.stopPropagation();
toggle.nextElementSibling.classList.toggle('show');
}
});
要点：
- 用
closest()精准匹配触发项，避免误判 - 检查
nextElementSibling是否为dropdown-menu，防止操作无关节点 - 务必调用
e.stopPropagation()，否则父级 dropdown 会收到 click 并收起自己
用 bootstrap.bundle.min.js 但二级仍不生效，先查控制台报错
即使 bundle 已加载，也可能因 HTML 结构不满足 Bootstrap 5 的初始化条件而跳过二级菜单。打开浏览器控制台，执行：
typeof bootstrap === 'object' && typeof Popper !== 'undefined'
返回 true 表示依赖就绪；若报 ReferenceError: bootstrap is not defined，说明 bootstrap.bundle.min.js 没加载成功（常见于 CDN 链接被换行截断、路径大小写错误、或放在 <head> 里但没加 defer）。
另外检查 Network 面板中 bootstrap.bundle.min.js 是否返回 200，有没有被 CSP 策略拦截（尤其本地开发时启用了 strict CSP）。
二级菜单不是 Bootstrap 原生支持的组件，它不参与自动初始化流程。无论你用 hover、focus 还是 click，都得自己管定位、显隐、可访问性（aria-expanded、aria-haspopup），不能指望 JS 自动补全。
