原生JS实现Checkbox移动端菜单：点击图标无法关闭问题求助

我刚接触JavaScript，开发移动端菜单时遇到一个问题：菜单在点击外部区域或链接时能正常关闭，但点击菜单图标（绑定在checkbox上）本身无法关闭。代码里的if( e.target != checkbox )判断应该是问题所在，但不知道怎么改。

原代码：

var checkbox = document.querySelector( '#mobileCheck' );

checkbox.addEventListener( 'click', function(){
  if( this.checked ) {
    document.getElementById("mobile__menu-contents").classList.add("mobile__menu-open");
    document.addEventListener( 'click', listener );
  } 
});

var listener = function( e ) {
  if( e.target != checkbox ) {
    checkbox.checked = false;
    document.getElementById("mobile__menu-contents").classList.remove("mobile__menu-open");
    document.removeEventListener( 'click', listener );
  }
};

问题根源 #

1. 给document绑定的点击监听直接排除了点击checkbox的情况，导致点击图标时不会触发关闭逻辑。
2. 原checkbox点击事件只在打开菜单时添加全局监听，没有处理点击图标关闭菜单的场景，状态逻辑不完整。

修改后的代码 #

var checkbox = document.querySelector('#mobileCheck');
var menuContents = document.getElementById("mobile__menu-contents");

checkbox.addEventListener('click', function() {
  if (this.checked) {
    menuContents.classList.add("mobile__menu-open");
    // 菜单打开时添加全局点击监听
    document.addEventListener('click', closeMenuListener);
  } else {
    // 点击图标关闭菜单时，同步更新菜单状态并移除全局监听
    menuContents.classList.remove("mobile__menu-open");
    document.removeEventListener('click', closeMenuListener);
  }
});

function closeMenuListener(e) {
  // 仅当点击区域不在菜单内、也不是checkbox本身时，才关闭菜单
  var isMenuOrCheckbox = menuContents.contains(e.target) || e.target === checkbox;
  if (!isMenuOrCheckbox) {
    checkbox.checked = false;
    menuContents.classList.remove("mobile__menu-open");
    document.removeEventListener('click', closeMenuListener);
  }
}

关键修改点 #

• 给checkbox的点击事件补充else分支：当取消勾选（点击图标关闭）时，直接移除全局监听并更新菜单状态。
• 全局监听里优化判断逻辑：保留点击外部关闭的功能，同时允许点击图标本身触发关闭。
• 缓存菜单元素到变量，避免重复DOM查询，提升性能。

额外优化（针对标签绑定的图标） #

如果你的菜单图标是通过<label for="mobileCheck">绑定的，需要把标签也加入判断，防止点击标签时无法关闭：

var checkboxLabel = document.querySelector('label[for="mobileCheck"]');

// 在closeMenuListener里修改判断条件：
var isMenuOrCheckbox = menuContents.contains(e.target) || e.target === checkbox || e.target === checkboxLabel;

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