添加data-bs-toggle与data-bs-target后Bootstrap导航栏链接失效问题

问题原因 #

你在<a>标签上添加data-bs-toggle="collapse"属性后，Bootstrap自带的JS逻辑会默认阻止链接的原生跳转行为，优先执行导航栏折叠逻辑，所以才会出现折叠正常但跳转失效的冲突。

解决方法 #

你只需要两步修改就可以同时实现两个功能：

1. 删掉导航链接上额外加的data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show"两个属性，避免Bootstrap拦截跳转事件
2. 页面里添加一段JS代码，手动监听导航链接点击事件，触发导航栏折叠：

//  Bootstrap 5 版本适用
document.querySelectorAll('.navbar-nav .nav-link').forEach(navLink => {
  navLink.addEventListener('click', function () {
    // 获取当前展开的导航栏折叠容器
    const openNav = document.querySelector('.navbar-collapse.show');
    if (openNav) {
      // 调用Bootstrap折叠实例方法收起导航
      bootstrap.Collapse.getOrCreateInstance(openNav).hide();
    }
  })
})

修改完成后点击导航链接，导航栏会正常收起，同时页面也会正常跳转到对应锚点位置。

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