事件监听器仅短暂添加类，如何实现永久生效？

问题根源 #

你的汉堡菜单使用了<a>标签且href=""为空，点击时浏览器会默认执行跳转行为（刷新当前页面），导致刚触发的过渡效果还没完成，页面就重置回初始状态了。

解决方案 #

1. 阻止默认跳转行为（推荐）

在点击事件处理函数中添加event.preventDefault()，直接阻止浏览器的默认跳转动作，同时用classList.toggle()简化重复的类切换逻辑：

const menuBtn = document.querySelector(".burgerMenu");
const sMenu = document.querySelector("#sideMenu");
const bI1 = document.querySelector(".burgerIcon1");
const bI2 = document.querySelector(".burgerIcon2");
const bI3 = document.querySelector(".burgerIcon3");

menuBtn.addEventListener('click', (event) => {
  // 阻止a标签的默认跳转行为
  event.preventDefault();
  
  // 用toggle自动切换类，替代重复的if-else判断
  sMenu.classList.toggle('menuAway');
  bI1.classList.toggle('oneOnClick');
  bI2.classList.toggle('twoOnClick');
  bI3.classList.toggle('threeOnClick');
})

2. 替换标签类型（可选）

如果汉堡菜单不需要跳转功能，直接把<a>标签改成<div>，从根源避免默认跳转：

<div class="burgerMenu">
  <div class="burgerIcon burgerIcon1"></div>
  <div class="burgerIcon burgerIcon2"></div>
  <div class="burgerIcon burgerIcon3"></div>
</div>

修改后点击汉堡菜单，过渡效果会正常执行完成，不会再出现页面重置的情况。

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