Bootstrap 5下拉菜单默认拦截链接跳转，需将触发器改为button或span并分离href；二级菜单项保留href即可点击跳转；移动端需加touch-action和pointer-events防误触。
Bootstrap 5 默认下拉菜单不支持点击跳转
Bootstrap 5 的 dropdown 组件默认把 <a></a> 标签当作纯触发器——点击只展开/收起二级菜单，不会执行 href 跳转。这是设计使然，不是 bug，但和常见导航需求冲突：你希望一级菜单项本身可点击跳转，同时带下拉；或者二级菜单项点开后才跳转（即“悬停展开 + 点击跳转”）。
根本原因是 Bootstrap 绑定了 click 事件阻止了默认行为，并用 preventDefault() 拦截了链接跳转。要解耦“展开”和“跳转”，得手动干预事件流。
给一级菜单项加跳转，同时保留下拉功能
适用场景：顶部导航栏中，“产品”菜单既要点开二级列表，又要支持直接访问 /products 页面。
- 把触发下拉的元素从
<a></a>换成<button></button>或<span></span>，让真正的跳转链接独立存在 - 用
data-bs-toggle="dropdown"放在非链接元素上，避免干扰href - 确保
<a></a>标签不在dropdown-toggle类的元素内部，否则会被 Bootstrap 自动拦截
<li class="nav-item dropdown">
<a class="nav-link" href="/products">产品</a>
<button class="btn btn-link dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">展开菜单</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/products/web">Web 版</a></li>
</ul>
</li>
注意：button 必须设 type="button"，否则可能触发表单提交；视觉上用 CSS 隐藏按钮或叠加在文字右侧。
二级菜单点击后才跳转（非悬停）
这是最常被问到的“冲突”：鼠标移入就展开，但用户想点一下再跳转，避免误触。Bootstrap 5 默认没有 hover 展开，但很多人会自己加 :hover CSS，结果和 JS 行为打架。
- 禁用所有 hover 相关 CSS（如
.dropdown:hover .dropdown-menu），回归纯 JS 控制 - 监听
click事件，在dropdown-menu内部的<a></a>上直接跳转，不依赖 Bootstrap 的 toggle 逻辑 - 如果需要“点一次展开，再点同个项跳转”，得手动维护展开状态，推荐用
data-bs-persistent="true"配合自定义 JS
简单方案：移除所有 hover 样式，靠 Bootstrap 默认 click 行为展开，二级项保持原 <a href></a> 即可正常跳转——只要你不给它们加 data-bs-toggle。
移动端点击穿透或重复触发问题
在 iOS Safari 或部分 Android 浏览器里，点击下拉触发器后，手指抬起瞬间可能误触下方菜单项，导致跳转+展开同时发生，甚至触发两次。
- 给
.dropdown-menu加touch-action: manipulation，减少延迟响应 - 在
show.bs.dropdown事件中，对刚展开的菜单加pointer-events: none100ms，再设回auto，错开触摸窗口 - 避免在
dropdown-toggle元素上同时写href和data-bs-toggle，这是冲突高发区
真正难处理的是嵌套深、动画未结束时的快速连点——这时候得加节流，比如用 setTimeout 锁住 toggle 操作 300ms。
