Bootstrap 5 折叠导航栏点击链接自动隐藏失效问题求解

你之前的两个方案都踩了Bootstrap 5折叠组件的默认行为坑：

1. 手写JS不生效：你初始化bootstrap.Collapse的时候没传配置，组件初始化默认会自动执行一次toggle，页面刚加载就会把菜单状态切乱；而且你没判断当前菜单是不是处于折叠展开状态，大屏上导航本来就是常驻展开的，点链接反而会给它收起来；另外你绑定事件的是外层li.nav-item，点li上没链接的空白位置也会误触发折叠。
2. 加data属性后不跳转：Bootstrap给带data-bs-toggle="collapse"的元素绑事件的时候，会默认阻止元素的原生默认行为，a标签的锚点跳转直接被拦截了，自然跳不到对应区块。

把你之前写的那段JS替换成下面的代码就行，完全不影响锚点跳转，只会在小屏折叠菜单弹出来的时候，点击链接自动把菜单收起来：

document.addEventListener('DOMContentLoaded', () => {
  const navCollapseEl = document.getElementById('navbarSupportedContent');
  const navLinks = document.querySelectorAll('#navbarSupportedContent .nav-link');
  // 初始化折叠实例，toggle:false 禁止初始化时自动切换菜单状态
  const collapseIns = new bootstrap.Collapse(navCollapseEl, { toggle: false });

  navLinks.forEach(link => {
    link.addEventListener('click', () => {
      // 只有菜单是展开状态的时候才执行收起，避免大屏下误收导航
      if (navCollapseEl.classList.contains('show')) {
        collapseIns.hide();
      }
    })
  })

  // 要是你想让右上角的「request a quote」按钮点了也收菜单，加这段即可
  const ctaBtn = document.querySelector('#navbarSupportedContent .btn-primary');
  ctaBtn?.addEventListener('click', () => {
    if (navCollapseEl.classList.contains('show')) collapseIns.hide();
  })
})

注意事项 #

• 不用给任何a标签加data-bs-toggle/data-bs-target属性，保持你原来的HTML结构就行
• 确认页面已经正确引入Bootstrap 5的JS依赖（要带Popper的bundle版本，不然Collapse组件无法正常调用）
• 逻辑里加了状态判断，不管是点击锚点链接跳页内区块，还是以后加跳外站的链接，跳转行为都不会受影响

内容的提问来源于stack exchange，提问作者Amr El-Nagdy