点击侧边滑出菜单内链接后如何让汉堡按钮恢复初始状态

问题根因 #

汉堡按钮的切换动画由change类控制，只有点击汉堡按钮本身时才会触发类名切换，点击侧边栏内链接仅执行了toggleMenu修改菜单状态，没有同步修改汉堡按钮的类，因此按钮状态无法复位。

修复步骤 #

1. 替换原有JS代码

将汉堡按钮状态同步逻辑整合到toggleMenu函数中，无需再分开调用两个函数：

// 提前获取汉堡按钮DOM，避免重复查询
const menuBtn = document.querySelector('.lineContainer');
var toggleStatus = 1;

function toggleMenu() {
  if (toggleStatus === 1) {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.3)";
    // 打开菜单时给按钮添加change类
    menuBtn.classList.add("change");
    toggleStatus = 0;
  } else if (toggleStatus === 0) {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
    // 关闭菜单时给按钮移除change类
    menuBtn.classList.remove("change");
    toggleStatus = 1;
  }
}

2. 修改汉堡按钮的点击事件

原有按钮同时绑定了两个函数，现在仅保留toggleMenu调用即可：

<button class="lineContainer" onclick="toggleMenu()">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</button>

可选优化：所有侧边栏链接点击自动关闭菜单

如果需要点击任意侧边栏链接都关闭菜单，给所有a标签统一添加onclick="toggleMenu()"即可：

<div id="mySidenav" class="sidenav">
  <a class="about" href="#about" onclick="toggleMenu()">About</a>
  <a href="#m" onclick="toggleMenu()">Meet Me</a>
  <a href="#" onclick="toggleMenu()">Contact Form</a>
  <a href="#" onclick="toggleMenu()">Reviews</a>
  <a href="#" onclick="toggleMenu()">Social Media</a>
</div>

修改完成后，不管是点击汉堡按钮还是侧边栏内的链接，菜单状态和汉堡按钮动画都会同步更新。

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