Bootstrap5下拉菜单触发按钮无法同时作为跳转链接问题

问题原因 #

Bootstrap 5 下拉菜单组件默认会阻止带data-bs-toggle="dropdown"属性元素的原生点击跳转行为，因此你给下拉触发标签设置的href="#product"不会生效，点击后仅会执行展开下拉菜单的逻辑。

解决方案 #

方案1：添加点击事件手动触发锚点跳转

在页面中加入如下JS代码即可实现点击下拉触发按钮时，既展开菜单，同时跳转到产品板块：

// 监听下拉触发按钮的点击事件
document.querySelector('#navbarDropdown').addEventListener('click', function () {
  // 如需平滑滚动可以使用下方注释的代码替代直接赋值hash
  // document.querySelector('#product').scrollIntoView({ behavior: 'smooth' })
  window.location.hash = '#product'
})

如果需要全局开启锚点平滑滚动，可以在CSS中添加如下规则：

html {
  scroll-behavior: smooth;
}

方案2：拆分跳转链接与下拉触发按钮

如果你的交互需求是「点击Products文字直接跳转产品板块，仅点击右侧下拉箭头时才展开菜单」，可以修改导航栏结构如下：

<li class="nav-item dropdown a-group d-flex align-items-center">
    <!-- 独立的跳转链接 -->
    <a class="nav-link pe-1" href="#product">Products</a>
    <!-- 仅负责触发下拉的箭头按钮 -->
    <a class="nav-link dropdown-toggle ps-0" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"></a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="nav-link dropdown-item" href="#">Single Phase</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="nav-link dropdown-item" href="#">Three Phase</a></li>
    </ul>
</li>

以上两种方案均不需要修改你已有的产品板块代码。

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