JavaScript导航菜单关闭按钮仅首次点击生效问题求助

核心问题点 #

• 重复生成DOM节点：每次点击汉堡菜单按钮触发myFunction时，都会新建一个侧边栏节点插入页面，之前打开过的菜单仅被设置为隐藏、没有被删除，多次操作后页面会堆叠大量隐藏的菜单节点，遮挡住最新菜单的关闭按钮，导致点击无响应。
• 语法逻辑错误：关闭按钮的点击判断中，误将严格比较运算符===写为赋值运算符=，且初始菜单的display属性设置为flex，判断条件里却写的block，和实际属性值不匹配，判断逻辑本身无效。
• 状态处理缺失：代码没有做菜单打开状态的校验，也没有在关闭菜单时清理生成的DOM节点，导致节点越积越多。

修复后完整JS代码 #

替换原有myFunction相关的JS代码即可：

function myFunction() {
  // 打开菜单前先校验是否存在已打开的菜单，存在则直接移除，避免重复创建
  const existingMenu = document.querySelector('.hello');
  if (existingMenu) {
    existingMenu.remove();
    return;
  }

  const menuNode = document.createElement('div');
  menuNode.className = 'hello';
  menuNode.innerHTML = `
        <span id="hi" class="material-icons">close</span>
        <a class="na" href="#">Home
          <span class="material-icons">home</span>
        </a>
        <a class="na" href="#">About us
          <span class="material-icons">business</span>
        </a>
        <a class="na" href="#">Products
          <span class="material-icons">local_mall</span>
        </a>
        <a class="na" href="#">Contact
          <span class="material-icons">call</span>
        </a> 
  `
  // 统一设置菜单样式
  menuNode.style.cssText = `
    background-color: #a90707;
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    font-size: 25px;
  `
  document.body.appendChild(menuNode);

  // 绑定关闭按钮事件
  const closeBtn = document.querySelector('#hi');
  closeBtn.addEventListener('click', function() {
    menuNode.remove();
  })
}

修复说明 #

• 新增菜单打开前的重复节点校验，页面已经存在侧边栏节点时，再次点击汉堡按钮会直接关闭菜单，符合移动端导航的常规交互逻辑。
• 修正了原有的运算符错误和属性值不匹配问题，关闭菜单时直接移除DOM节点，不会残留隐藏元素造成层级遮挡。
• 把分散的内联样式设置合并为cssText统一写入，代码可读性更高。

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