Bootstrap5如何实现点击导航链接折叠navbar（两种方案无效）

你之前尝试的两种方案失效，基本都是版本适配、绑定时机的问题，下面两种方案直接套用即可生效。

方案1：原生属性实现（无需写JS，推荐） #

你之前只给汉堡按钮加了折叠触发属性，导航栏内的链接、按钮没有加对应属性，自然不会触发折叠。
直接给所有导航链接、折叠区域内的交互按钮（比如你写的request a quote按钮）加上3个属性即可：

• data-bs-toggle="collapse"
• data-bs-target="#navbarSupportedContent"
• （可选）aria-expanded="false" 用于适配无障碍读屏

修改后的导航项示例：

<li class="nav-item">
  <a 
    class="nav-link active" 
    aria-current="page" 
    href="#home"
    data-bs-toggle="collapse"
    data-bs-target="#navbarSupportedContent"
    >Home</a
  >
</li>

版本适配提示：如果你用的是Bootstrap 4.x版本，把所有属性里的bs-前缀删掉就行，也就是改成data-toggle="collapse"、data-target="#navbarSupportedContent"。

方案2：全局JS监听实现（不用挨个加属性，全版本兼容） #

如果导航项很多不想逐个改属性，直接在页面DOM加载完成后插入一段监听代码即可，注意代码要放在导航DOM节点渲染之后，或者放在DOMContentLoaded回调里，否则会因为找不到节点绑定失败。

Bootstrap 5.x 版本代码： #

document.addEventListener('DOMContentLoaded', () => {
  const navContainer = document.querySelector('#navbarSupportedContent');
  navContainer.addEventListener('click', (e) => {
    // 匹配点击的是导航链接或者CTA按钮就触发折叠
    if (e.target.matches('.nav-link, .btn-primary')) {
      bootstrap.Collapse.getOrCreateInstance(navContainer).hide();
    }
  })
})

Bootstrap 4.x 版本代码（需提前引入jQuery）： #

$(document).ready(() => {
  $('.navbar-collapse').on('click', '.nav-link, .btn-primary', () => {
    $('.navbar-collapse').collapse('hide');
  })
})

常见失效排查项 #

如果加完代码还是不生效，按顺序检查：

1. 先确认点击汉堡按钮本身可以正常展开/收起菜单，如果这个功能都失效，先检查Bootstrap JS依赖是否正确引入：Bootstrap 5需要在引入自身JS之前先引入Popper.js，Bootstrap4需要先引入jQuery+Popper.js
2. 核对你用的属性、JS API和当前Bootstrap版本对应，4和5的API不通用，最典型的区别就是5的data属性带bs-前缀
3. 检查自定义CSS（比如你写的custom-nav、navbtn相关样式）有没有给导航链接加pointer-events: none、z-index层级被遮挡这类拦截点击的设置

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