实现点击后关闭汉堡导航菜单的JS技术求助

首先排查基础问题：

• 确认HTML中汉堡按钮的类名确实是b-menu，导航容器是b-container，导航菜单是b-nav，类名拼写完全一致，没有大小写错误。
• 检查CSS里的.open类是否正确实现了菜单的显示/隐藏逻辑，比如默认隐藏菜单，添加.open后显示：

.b-nav {
  display: none;
  /* 其他样式 */
}
.b-nav.open {
  display: block;
}

如果点击汉堡按钮本身无法切换关闭，先在控制台打印burgerMenu，确认是否成功选中元素：

console.log(burgerMenu); // 如果输出null，说明类名错误或元素还未加载

如果是元素未加载问题，把代码放在DOMContentLoaded事件里：

'use strict';

document.addEventListener('DOMContentLoaded', function() {
  var body = document.body;
  var burgerMenu = document.getElementsByClassName('b-menu')[0];
  var burgerContain = document.getElementsByClassName('b-container')[0];
  var burgerNav = document.getElementsByClassName('b-nav')[0];

  burgerMenu.addEventListener('click', function toggleClasses() {
    [body, burgerContain, burgerNav].forEach(function (el) {
      el.classList.toggle('open');
    });
  }, false);
});

如果是需要点击导航项后关闭菜单，修改代码如下：

'use strict';

(function() {
  var body = document.body;
  var burgerMenu = document.getElementsByClassName('b-menu')[0];
  var burgerContain = document.getElementsByClassName('b-container')[0];
  var burgerNav = document.getElementsByClassName('b-nav')[0];
  var navItems = burgerNav.querySelectorAll('a, li'); // 选中所有可点击的导航元素

  // 统一切换菜单状态的函数
  function toggleMenuState() {
    [body, burgerContain, burgerNav].forEach(el => el.classList.toggle('open'));
  }

  // 汉堡按钮点击事件
  burgerMenu.addEventListener('click', toggleMenuState, false);

  // 点击导航项关闭菜单
  navItems.forEach(item => {
    item.addEventListener('click', () => {
      // 直接移除open类确保关闭，避免toggle可能导致的异常
      [body, burgerContain, burgerNav].forEach(el => el.classList.remove('open'));
    });
  });

  // 可选：点击页面其他区域关闭菜单
  document.addEventListener('click', e => {
    if (!burgerContain.contains(e.target) && e.target !== burgerMenu) {
      [body, burgerContain, burgerNav].forEach(el => el.classList.remove('open'));
    }
  });
})();

另外，注意如果菜单使用了过渡动画，确保open类的动画逻辑正确，避免因为动画导致的交互延迟问题。

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