如何让Bootstrap下拉菜单同时支持点击跳转与折叠功能？

数据老陈

2026-8-16

实现Bootstrap 5折叠侧边栏顶级按钮的跳转+折叠功能

核心思路

Bootstrap 5的折叠组件支持用<a>标签作为触发元素，只需同时保留折叠属性和跳转链接，再通过少量JS处理跳转与折叠的逻辑冲突即可。

步骤1：修改HTML结构

把原来的触发按钮替换为<a>标签，添加目标页面的href，同时保留折叠所需的data-bs-toggle和data-bs-target属性：

<!-- 替换前的按钮 -->
<button class="btn btn-link d-flex align-items-center gap-1 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse">
  Dashboard
</button>

<!-- 替换后的可跳转链接 -->
<a href="/dashboard" class="btn btn-link d-flex align-items-center gap-1 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse">
  Dashboard
</a>

步骤2：处理跳转与折叠的逻辑

默认情况下，点击<a>标签会直接跳转，可能打断折叠动画。如果希望先完成折叠展开再跳转，添加以下JS代码：

// 选中所有侧边栏带折叠功能的顶级链接
document.querySelectorAll('.sidebar .btn-link[data-bs-toggle="collapse"]').forEach(link => {
  link.addEventListener('click', function(e) {
    const collapseTarget = document.querySelector(this.dataset.bsTarget);
    const collapse = bootstrap.Collapse.getOrCreateInstance(collapseTarget);

    // 如果当前是收起状态，先展开再跳转
    if (!collapse._isShown) {
      e.preventDefault(); // 阻止默认跳转
      collapse.show();
      // 等待Bootstrap折叠动画完成（默认300ms）后跳转
      setTimeout(() => {
        window.location.href = this.href;
      }, 300);
    }
    // 如果当前是展开状态，直接跳转
  });
});