Bootstrap 5使用accordion类时表格行内链接被禁用无法正常跳转问题

这个问题是Bootstrap 5的事件绑定机制变化导致的，点击链接时点击事件会冒泡到绑定了data-bs-toggle="collapse"的父级tr元素，触发折叠逻辑，同时阻断了链接的默认跳转行为，该问题和元素层级无关，所以调整z-index不会生效。

解决方案 #

方案1：使用Bootstrap 5原生属性（无需额外JS） #

直接给行内的<a>标签添加data-bs-stop-propagation属性，Bootstrap 5会自动阻止该元素的点击事件向上冒泡，不会触发父级的折叠逻辑，修改后的链接代码如下：

<a href="https://stackoverflow.com" data-bs-stop-propagation>Test Link</a>

方案2：手动绑定事件阻止冒泡（兼容性更好） #

如果使用的Bootstrap 5版本较低不支持上述属性，可以添加一段全局JS处理所有同类场景：

// 监听所有带collapse触发的行内链接的点击事件
document.querySelectorAll('tr[data-bs-toggle="collapse"] a').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止事件冒泡到父级tr
    e.stopPropagation()
  })
})

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