Bootstrap 5.1.3 移动端navbar点击菜单项后不折叠问题求助

Bootstrap 5的导航折叠组件默认仅通过汉堡按钮的data属性绑定了切换逻辑，点击导航内的菜单项默认不会触发菜单收起，你的基础资源引入代码和组件结构本身没有错误。

方案1：直接给导航链接添加data属性（无需额外JS） #

给每个.nav-link元素加上data-bs-toggle="collapse"、data-bs-target="#navbarSupportedContent"两个属性即可生效，修改后的导航项示例：

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

如果需要额外支持点击折叠区域外自动关闭菜单，可以给id为navbarSupportedContent的collapse div加上data-bs-auto-close="outside"属性。

方案2：添加全局JS逻辑（无需逐个修改链接属性） #

在现有Bootstrap JS引入之后添加如下代码即可全局生效，不需要给每个导航链接单独加属性：

document.addEventListener('DOMContentLoaded', function () {
  const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
  const navbarCollapse = document.querySelector('.navbar-collapse');
  
  navLinks.forEach(link => {
    link.addEventListener('click', () => {
      if (navbarCollapse.classList.contains('show')) {
        const collapseInstance = new bootstrap.Collapse(navbarCollapse, {
          toggle: false
        });
        collapseInstance.hide();
      }
    });
  });
});

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