Bootstrap 5 Navbar Dropdown下拉链接点击无法跳转问题咨询

问题核心原因 #

Bootstrap 5 中带有data-bs-toggle="dropdown"属性的元素，默认会被组件阻止原生点击事件，所以你给下拉触发a标签设置的href属性不会生效，这是组件的预设逻辑，和依赖是否引入无关。

推荐解决方案 #

方案1：改为悬停触发下拉，点击直接跳转（最符合常规导航使用习惯）

1. 首先去掉两个下拉触发a标签上的data-bs-toggle="dropdown"、role="button"、aria-expanded="false"属性
2. 新增如下CSS样式即可实现悬停展开下拉，点击触发链接正常跳转：

/* 桌面端悬停触发下拉 */
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* 消除默认边距防止鼠标移入时菜单收起 */
  }
  .dropdown {
    position: relative;
  }
}
/* 移动端可保留原点击展开逻辑，无需额外修改 */

方案2：保留点击触发下拉逻辑，在下拉菜单中增加总页入口

如果你坚持要点击触发按钮仅负责展开菜单，可以把跳转入口放在下拉菜单的第一个选项，符合Bootstrap组件的设计逻辑，修改示例如下（以Reviews下拉为例）：

<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" aria-current="page" href="#" id="navbarDropdownMenuLinkTwo" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Reviews </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkTwo">
    <!-- 新增总页跳转入口 -->
    <li><a class="dropdown-item" href="reviews.html">所有Reviews</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</li>

内容的提问来源于stack exchange，提问作者ovaryacting