如何通过JavaScript实现点击选项后自动关闭汉堡菜单

现有代码仅实现了汉堡按钮的点击展开/收起切换，缺少菜单内链接点击后的自动收起逻辑，直接替换原有JS代码为如下版本即可，无需改动已写好的HTML和CSS：

// 抽离通用菜单切换逻辑，供多场景调用
function toggleMenu() {
  document.getElementById("menu-bar").classList.toggle("change");
  document.getElementById("nav").classList.toggle("change");
  document.getElementById("menu-bg").classList.toggle("change-bg");
}

// 保留原有的汉堡按钮点击绑定
function menuOnClick() {
  toggleMenu();
}

// 页面DOM加载完成后，为所有菜单内链接绑定点击收起事件
document.addEventListener('DOMContentLoaded', function() {
  const navLinks = document.querySelectorAll('#nav a');
  navLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      // 校验菜单为展开状态时才执行收起，避免状态切换错乱
      const menuIsOpen = document.getElementById("menu-bar").classList.contains("change");
      if (menuIsOpen) {
        toggleMenu();
      }
    })
  })
})

适配说明 #

• 如果菜单内除了跳转链接，还有按钮、选项等其他点击后需要触发菜单收起的元素，只需修改querySelectorAll的选择器范围，覆盖所有目标元素即可
• 状态校验逻辑可以避免菜单收起状态下点击元素误触发反向展开的问题

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