Vanilla JS setTimeout致汉堡菜单退出按钮失效问题排查

问题背景 #

用HTML、CSS和原生JS实现汉堡样式菜单动画，预期效果如下：

点击汉堡图标时： #

• main元素在2000ms内旋转180°并沿高度方向收缩
• 2000ms后菜单显示，汉堡图标切换为X

点击退出按钮时： #

• 页面旋转180°覆盖菜单
• 通过display: none;隐藏菜单
• 退出按钮恢复为汉堡图标

实际运行中退出按钮完全失效，排查后确认问题出在代码第12-14行的setTimeout逻辑，同时还有其他配套问题未处理。

核心问题点 #

1. 退出按钮未绑定事件+缺失DOM元素：代码里定义了exitButton变量和点击函数，但HTML中根本没有id="exit-button"的元素，也没给按钮绑定点击监听。
2. 状态判断时机错误：点击汉堡按钮时，立即判断mobileMenu的hidden类，但setTimeout里的toggle操作是2秒后才执行，此时判断的是当前状态而非2秒后的状态，导致图标切换逻辑完全错乱。
3. 状态同步缺失：退出时没有处理main元素的moved-away类移除，也没同步恢复汉堡图标。

修复方案及完整代码 #

1. 补全HTML中的退出按钮 #

在mobile-menu容器内添加退出按钮，设置对应ID和样式：

<div class="nav-bar">
  <nav class="mobile-nav">
    <a href="index.html"><img src="/resources/Copy of The Coders Club.png" class="nav-img"></a>
    <div class="nav-options">
      <button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
        <div class='line'></div><br>
        <div class='line'></div><br>
        <div class='line'></div>
      </button>
    </div>
  </nav>

  <div class="mobile-menu hidden" id="mobile-menu-id">
    <button class="exit-btn" id="exit-button">×</button>
    <ul class="mobile-options">
      <a href="/about.html">
        <li><button class="mobile-option">About</button></li>
      </a>
      <a href="/classes.html">
        <li><button class="mobile-option" style="margin-top: 15%; margin-bottom: 15%;">Classes</button></li>
      </a>
      <a href="/contact.html">
        <li><button class="mobile-option">Contact</button></li>
      </a>
    </ul>
  </div>
</div>
<main id="main-content">
  Some content. Lorem ipsum... Hello, World!
</main>

2. 重构JS逻辑，同步状态 #

将打开/关闭菜单的逻辑拆分，确保定时器内的操作和状态同步，同时绑定退出按钮事件：

var exitButton = document.getElementById("exit-button");
var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");
var mainContent = document.getElementById("main-content");

// 打开菜单：处理main动画、显示菜单、切换图标
function openMobileMenu() {
  mainContent.classList.add("moved-away");
  setTimeout(() => {
    mobileMenu.classList.remove("hidden");
    mobileMenuButton.innerHTML = "×";
  }, 2000);
}

// 关闭菜单：恢复main状态、隐藏菜单、还原图标
function closeMobileMenu() {
  mainContent.classList.remove("moved-away");
  setTimeout(() => {
    mobileMenu.classList.add("hidden");
    mobileMenuButton.innerHTML = "<div class='line'></div><br><div class='line'></div><br><div class='line'></div>";
  }, 2000);
}

// 汉堡按钮点击：根据当前菜单状态执行对应操作
mobileMenuButton.addEventListener("click", () => {
  mobileMenu.classList.contains("hidden") ? openMobileMenu() : closeMobileMenu();
});

// 退出按钮点击：直接执行关闭逻辑
exitButton.addEventListener("click", closeMobileMenu);

3. 调整CSS（可选，优化退出按钮定位） #

修改exit-btn的定位样式，确保按钮显示在菜单右上角：

.exit-btn {
  min-width: 50px;
  background-color: transparent;
  border: none;
  font-size: 4rem;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  position: absolute !important;
  top: 10px;
  right: 50px;
  z-index: 999999 !important;
}

其他CSS代码保持不变即可。

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