JavaScript菜单开关异常：可创建菜单Div但无法关闭求排查

你的代码有几个关键问题导致菜单无法关闭：

1. 选择器语法错误 #

获取关闭菜单元素时，document.querySelector('closeMenu1')缺少id选择器的#前缀，正确写法是document.querySelector('#closeMenu1')。但就算改了这个，逻辑还是不生效——因为你是在页面加载时就执行这段获取元素的代码，这时候菜单还没被创建，所以_closeMenu的值是null，后续的点击事件根本没绑定上。

2. 元素存在性检查时机错误 #

var closingMenu = !!document.querySelector('.closeMenu');是在页面初始化时执行的，这时候菜单还没被点击创建，所以closingMenu是false，if块里的代码完全没执行，自然不会绑定关闭事件。

修复方案 #

方案一：创建菜单后立即绑定关闭事件 #

直接在创建菜单的回调里，给新生成的closeMenu元素绑定点击事件，确保元素存在时才绑定事件：

const openMenu = document.querySelector('.menu-icon');

openMenu.addEventListener('click', () => {
  // 创建菜单元素
  const closeMenu = document.createElement('div');
  closeMenu.id = "closeMenu1";
  closeMenu.className = "closeMenu";
  closeMenu.style.width = "400px";
  closeMenu.style.height = "600px";
  closeMenu.style.borderRadius = "6px";
  closeMenu.style.position = "relative";
  closeMenu.style.top = "50%";
  closeMenu.style.left = "50%";
  closeMenu.style.backgroundColor = "#99aaa1";
  document.body.appendChild(closeMenu);

  // 绑定关闭事件
  closeMenu.addEventListener('click', () => {
    closeMenu.remove();
  });
});

方案二：使用事件委托（更优，适合动态元素） #

如果需要支持菜单多次创建/移除，用事件委托把监听绑定到父元素上，不用每次创建都重复绑定事件：

const openMenu = document.querySelector('.menu-icon');

// 打开菜单逻辑
openMenu.addEventListener('click', () => {
  const closeMenu = document.createElement('div');
  closeMenu.id = "closeMenu1";
  closeMenu.className = "closeMenu";
  closeMenu.style.width = "400px";
  closeMenu.style.height = "600px";
  closeMenu.style.borderRadius = "6px";
  closeMenu.style.position = "relative";
  closeMenu.style.top = "50%";
  closeMenu.style.left = "50%";
  closeMenu.style.backgroundColor = "#99aaa1";
  document.body.appendChild(closeMenu);
});

// 事件委托实现关闭
document.body.addEventListener('click', (e) => {
  if (e.target.classList.contains('closeMenu')) {
    e.target.remove();
  }
});

额外优化建议 #

• 把内联样式移到CSS文件中，代码更整洁易维护：

.closeMenu {
  width: 400px;
  height: 600px;
  border-radius: 6px;
  position: relative;
  top: 50%;
  left: 50%;
  background-color: #99aaa1;
}

• 如果需要菜单只能打开一次，保留{once: true}参数；要支持多次打开关闭则去掉该参数。

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