如何实现Bootstrap汉堡菜单点击链接后自动关闭？现有代码异常求助

先说说你原来代码里的问题：

• 类选择器写错了：nav-link 是CSS类名，得加.写成 .nav-link，不然根本选不到任何元素。
• JS语法错误：addEventListener 的回调函数结尾只写了 );，少了个大括号，应该是 });，这会直接导致JS报错，菜单功能全崩。
• 直接改display: none会破坏Bootstrap折叠组件的状态逻辑：Bootstrap的汉堡菜单靠show类和aria-expanded等属性管理展开/收起状态，硬改display会让组件状态混乱，后续点击汉堡按钮也无法正常切换。

给你两个靠谱的解决方案：

方法1：使用Bootstrap 5原生API（推荐） #

Bootstrap本身为折叠组件提供了官方操作方法，用这个能完美兼容组件的状态管理：

// 选中所有导航链接
const navLinks = document.querySelectorAll('.nav-link');
// 获取折叠菜单实例，toggle设为false避免初始化时自动切换状态
const navbarCollapse = new bootstrap.Collapse(document.getElementById('navbarResponsive'), {
  toggle: false
});

// 给每个链接添加点击事件
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 仅当菜单处于展开状态时关闭它
    if (navbarCollapse._isShown) {
      navbarCollapse.hide();
    }
  });
});

方法2：手动操作类名（简单场景适用） #

如果不想用Bootstrap的API，也可以手动修改类名和属性，模拟Bootstrap的状态变化：

const navLinks = document.querySelectorAll('.nav-link');
const navbarResponsive = document.getElementById('navbarResponsive');
const togglerBtn = document.querySelector('.navbar-toggler');

navLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 移除展开类，让菜单收起
    navbarResponsive.classList.remove('show');
    // 更新汉堡按钮的aria属性，保持状态一致
    togglerBtn.setAttribute('aria-expanded', 'false');
  });
});

注意：确保你的项目已正确引入Bootstrap 5的JS文件（包括Popper.js，Collapse组件依赖它），否则API方法无法正常使用。

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