如何实现汉堡菜单点击链接或外部区域时自动关闭？

嘿，我来帮你搞定这两个恼人的问题！咱们一步步来调整代码：

问题1：点击菜单内锚点链接后菜单不关闭 #

只需要给菜单里的所有链接添加点击事件，触发时直接移除菜单的visible类和body的cover-bg类，就能让菜单自动关闭。

问题2：点击菜单外部区域时菜单不关闭 #

我们需要监听整个文档的点击事件，判断点击目标是否属于汉堡按钮或菜单内部元素——如果都不是，就执行关闭菜单的操作。这里要注意排除按钮和菜单本身的点击，不然点按钮的时候菜单会刚打开就关掉。

修改后的完整JavaScript代码 #

$(document).ready(function() {
  // 点击汉堡按钮切换菜单显示/隐藏
  $('.navbar-fostrap').click(function(e) {
    e.stopPropagation(); // 阻止事件冒泡到document，避免触发外部点击关闭逻辑
    $('.nav-fostrap').toggleClass('visible');
    $('body').toggleClass('cover-bg');
  });

  // 点击菜单内的任意链接，关闭菜单
  $('.nav-fostrap .menu a').click(function() {
    $('.nav-fostrap').removeClass('visible');
    $('body').removeClass('cover-bg');
  });

  // 点击菜单外部区域，关闭菜单
  $(document).click(function(e) {
    // 判断点击目标不是菜单、也不是汉堡按钮的后代元素
    const isMenuOrBtn = $('.nav-fostrap').is(e.target) || $('.nav-fostrap').has(e.target).length > 0 
                    || $('.navbar-fostrap').is(e.target) || $('.navbar-fostrap').has(e.target).length > 0;
    if (!isMenuOrBtn) {
      $('.nav-fostrap').removeClass('visible');
      $('body').removeClass('cover-bg');
    }
  });
});

代码细节说明 #

• e.stopPropagation()：在汉堡按钮的点击事件里加上这个，能防止事件冒泡到document层，避免刚点击按钮打开菜单，就被外部点击逻辑立刻关掉。
• 菜单链接的点击事件：不管是锚点跳转还是页面跳转，点击后都关闭菜单，符合用户的操作预期。
• 文档点击事件：用has()方法判断点击目标是否属于菜单或按钮的内部元素，精准区分外部点击场景。

另外，我注意到你提供的HTML代码最后有个未闭合的<a>标签，记得补全闭合标签（比如</a></li>），避免HTML结构错误影响功能哦。

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