汉堡菜单关闭按钮失效，寻求JavaScript/CSS修复方案

问题根源 #

1. 原JS逻辑混乱：点击汉堡按钮时同时执行显示/关闭函数，且错误复用控制汉堡按钮的hamburger类来切换菜单状态。
2. 关闭按钮未绑定点击事件，无法触发菜单隐藏操作。

一、JavaScript 代码修正 #

替换原JS代码为以下内容，通过独立事件绑定控制菜单状态：

// 获取核心元素
const menuBtn = document.querySelector(".hamburger_button");
const closeBtn = document.querySelector(".hamburgerexit_button");
const hamburgerMenu = document.querySelector(".hamburgermenu");

// 汉堡按钮：切换菜单显示/隐藏
menuBtn.addEventListener("click", () => {
  hamburgerMenu.classList.toggle("show");
});

// 关闭按钮：直接隐藏菜单
closeBtn.addEventListener("click", () => {
  hamburgerMenu.classList.remove("show");
});

修正说明

• 移除原代码中同时调用显示/关闭函数的错误逻辑。
• 复用已定义的show类控制菜单显示（该类已在CSS中设置display:flex），避免类名混淆。
• 给关闭按钮单独绑定点击事件，明确触发菜单隐藏操作。

二、CSS 代码确认 #

无需修改现有CSS，只需确保以下关键规则存在：

.hamburgermenu {
    display:none; /* 默认隐藏菜单 */
    /* 其他原有样式保持不变 */
}

.show {
    display:flex;
    flex-direction: column; /* 添加该类后显示菜单 */
}

说明

原CSS中已包含这两个类，show类的display:flex会覆盖hamburgermenu的display:none，保证菜单能正确切换显示状态。

最终效果 #

• 点击汉堡图标：菜单切换为显示状态（添加show类）。
• 点击关闭按钮：菜单切换为隐藏状态（移除show类）。

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