如何使用Javascript实现点击汉堡图标关闭移动端菜单

问题根因 #

你的代码核心问题出在if判断逻辑上：

1. if条件里误用了赋值运算符=而非比较运算符===，每次点击都会先强制把navLink.style.left设为-100%，再执行真值判断，所以永远只会触发打开逻辑，不会走关闭分支
2. 缺少菜单打开状态下的关闭逻辑处理

修复后代码（直接兼容你现有写法） #

const hamburgerBtn = document.getElementById("hamburger");
const navLink = document.querySelector(".nav__links");

navLink.style.left = "-100%";
hamburgerBtn.addEventListener("click", () => {
  // 用三等做值比较，不要用赋值运算符
  if (navLink.style.left === "-100%") {
    navLink.style.left = "0%";
  } else {
    // 新增关闭分支逻辑
    navLink.style.left = "-100%";
  }
});

更易维护的优化方案 #

推荐用CSS类控制状态，避免JS硬编码样式，后续迭代修改菜单样式不需要动JS逻辑：

1. 先在CSS中定义状态类

.nav__links {
  left: -100%;
  transition: left 0.3s ease; /* 可加过渡动画提升交互体验 */
}
/* 激活状态对应菜单展开 */
.nav__links.active {
  left: 0;
}

2. JS只需要做类名切换即可

const hamburgerBtn = document.getElementById("hamburger");
const navLink = document.querySelector(".nav__links");

hamburgerBtn.addEventListener("click", () => {
  navLink.classList.toggle("active");
});

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