Bootstrap 5 默认阻止带data-bs-toggle="dropdown"的链接跳转，解决方法是：父级用button或无href的a作为toggle，子项用带href且无data-bs-toggle的a，并为子项添加e.stopPropagation()防止事件冒泡。
Bootstrap 5 默认不支持二级菜单点击跳转
Bootstrap 5 的 dropdown 组件设计上只响应 hover 或 click 触发下拉，但默认会阻止 @#@#@#@#@#@#@#@#@#@0（不要加 data-bs-toggle）
<a></a> 做 toggle，请清空 href（href="#" 会导致页面跳顶，href="javascript:void(0)" 更安全）移动端点击穿透或误触导致跳转失败
在 iOS 或部分安卓 WebView 中，dropdown 展开后快速点击子项，有时会触发两次事件：一次是 toggle 的 close，一次是子项的 click，结果跳转被中断。这是因为 Bootstrap 的 dropdown 关闭逻辑和原生点击存在微小时序竞争。
解决方式不是禁用关闭，而是确保子项点击能「穿透」关闭过程。最简方案是在子项上监听 click，并立即调用 event.stopPropagation()，防止事件冒泡到父级 dropdown 触发器。
document.querySelectorAll('.dropdown-item[href]').forEach(el => {
el.addEventListener('click', function(e) {
e.stopPropagation();
});
});
- 这段脚本需在 DOM 加载完成后执行（如放在
底部或用DOMContentLoaded） - 仅对带
href的.dropdown-item生效，不影响纯 JS 动作项（如模态框触发） - 不推荐全局阻止默认行为（
e.preventDefault()），否则右键另存/新标签打开会失效
自定义下拉箭头与无障碍访问的冲突
很多人用伪元素或 SVG 替换 Bootstrap 默认的 caret，但容易忽略 aria-expanded 和 aria-haspopup 的同步更新。当用户用键盘操作（Tab → Enter）展开菜单时，如果这些属性没随状态变化，屏幕阅读器就无法告知当前是否已展开，可能导致重复触发或跳过内容。
正确做法是监听 Bootstrap 的 show.bs.dropdown 和 hidden.bs.dropdown 事件，手动更新属性：
const dropdownToggle = document.querySelector('[data-bs-toggle="dropdown"]');
dropdownToggle.addEventListener('show.bs.dropdown', () => {
dropdownToggle.setAttribute('aria-expanded', 'true');
});
dropdownToggle.addEventListener('hidden.bs.dropdown', () => {
dropdownToggle.setAttribute('aria-expanded', 'false');
});
-
aria-haspopup="menu"应始终保留在 toggle 元素上（Bootstrap 5 默认已加） - 如果用
<button></button>替代<a></a>，记得加上type="button"，否则表单内可能触发表单提交 - 视觉上的“箭头旋转”动画建议用 CSS 类切换（如
.dropdown-toggle[aria-expanded="true"]::after），而非 JS 操控 style
实际项目里最容易被忽略的，是把父级 toggle 和子项跳转混在同一语义层级，又没切断事件流。一旦开始调试“为什么点不动”，第一反应不该是查 JS 报错，而是检查那个 <a></a> 上有没有多余的 data-bs-toggle 或没清空的 href。
