如何让Bootstrap下拉菜单按钮同时具备跳转链接功能？

你的问题出在Bootstrap的下拉组件JS会阻止带有data-bs-toggle="dropdown"元素的默认点击行为，导致外层的a标签跳转失效。下面给你两种可行的解决方法：

方法一：改用a标签作为下拉触发器（推荐） #

Bootstrap 5支持直接用<a>标签替代按钮作为下拉触发器，这样既保留下拉功能，又能原生支持跳转，不需要额外JS：

<div class="dropdown link1">
  <a href="link1.html" class="btn btn-secondary btn-clr dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Shop
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="link1.html">Tops</a></li>
    <li><a class="dropdown-item" href="link1.html">Pants</a></li>
    <li><a class="dropdown-item" href="link1.html">Outerwear</a></li>
  </ul>
</div>

点击这个a标签时：

• 首次点击会展开下拉菜单
• 下拉菜单展开后再次点击，会触发跳转
• 点击下拉箭头仅展开菜单，点击文本区域可触发跳转

方法二：用JavaScript手动处理跳转 #

如果坚持用按钮元素，给按钮添加点击事件，根据下拉菜单的展开状态决定是否跳转：

1. 给按钮添加ID：

<button id="shopDropdownBtn" class="btn btn-secondary btn-clr dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  Shop
</button>

2. 在homepage.js中添加事件监听：

document.getElementById('shopDropdownBtn').addEventListener('click', function(e) {
  const dropdown = this.closest('.dropdown');
  // 检查下拉菜单是否已展开
  const isExpanded = dropdown.classList.contains('show');
  
  // 如果菜单已展开，执行跳转；否则让Bootstrap处理下拉展开
  if (isExpanded) {
    window.location.href = 'link1.html';
  }
});

这样点击按钮时，若菜单未展开则展开，已展开则跳转到目标页面。

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