JS新手求教：如何实现点击汉堡图标及Overlay关闭汉堡菜单？

嘿，我来帮你搞定这个小问题！你目前的代码只给汉堡图标绑定了点击事件，所以只有点图标才能关闭菜单。要实现点击Overlay区域也能关闭，只需要给Overlay也绑定相同的点击逻辑就行，甚至可以优化代码让它更简洁~

修改后的完整代码 #

$(document).ready(function () { 
  var trigger = $('.hamburger'), 
      overlay = $('.overlay'), 
      isClosed = false; 

  // 给汉堡图标和Overlay同时绑定点击事件
  trigger.click(hamburger_cross);
  overlay.click(hamburger_cross);

  function hamburger_cross() { 
    if (isClosed) { 
      // 关闭菜单的逻辑：隐藏Overlay，切换汉堡图标样式
      overlay.hide(); 
      trigger.removeClass('is-open').addClass('is-closed'); 
      isClosed = false; 
    } else { 
      // 打开菜单的逻辑：显示Overlay，切换汉堡图标样式
      overlay.show(); 
      trigger.removeClass('is-closed').addClass('is-open'); 
      isClosed = true; 
    } 
  } 
});

关键修改点 #

• 我把hamburger_cross()函数直接绑定给了overlay的点击事件，这样点击Overlay和点击汉堡图标会触发完全一样的逻辑
• 顺便把代码里的isClosed == true简化成了isClosed，这是JS里的常用写法，效果完全一致
• 如果想更精简，还可以把两个事件合并成一行：

  $(trigger, overlay).click(hamburger_cross);
  

额外提醒（很重要！） #

要确保你的Overlay CSS样式是覆盖整个页面的，不然用户点击空白区域可能不会触发事件。推荐的Overlay样式参考：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色，营造遮罩效果 */
  z-index: 998; /* 层级要低于菜单，高于页面内容 */
  display: none; /* 默认隐藏 */
}

这样设置后，用户点击页面上任何非菜单的区域（也就是Overlay覆盖的区域），都会触发菜单关闭的动作啦~

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