页面刷新后汉堡图标需点击两次才触发功能的技术问题求助

嘿，这个问题我之前踩过坑！根源出在你代码里判断的是元素的内联样式（inline style），但页面刷新后，导航栏的初始left值大概率是通过外部CSS或者<style>标签设置的，并不是直接写在元素的style属性里——这就导致asideNavigation.style.left一开始是空字符串，根本不是你以为的-100vw。

第一次点击时，条件asideNavigation.style.left === "-100vw"不成立，代码会执行else分支把left设为-100vw；第二次点击时，内联样式里终于有了匹配的值，条件才会触发正确的显示逻辑。

下面给你几个靠谱的解决方案：

方案一：用CSS类切换状态（推荐） #

把样式逻辑完全交给CSS，JS只负责切换状态，既清晰又能彻底避免初始值问题：

首先在CSS里定义状态类：

/* 默认状态：导航栏显示 */
#nav-list-wrapper {
  left: 0;
  transition: left 0.3s ease; /* 可选：加个过渡动画更流畅 */
}

/* 隐藏状态 */
#nav-list-wrapper.nav-hidden {
  left: -100vw;
}

然后修改JS代码，只需要切换类即可：

let hamburgerIcon = document.getElementById('hamburger-icon'); 
let asideNavigation = document.getElementById('nav-list-wrapper'); 

hamburgerIcon.addEventListener("click", () => { 
  asideNavigation.classList.toggle('nav-hidden');
});

这样不管页面怎么刷新，初始状态由CSS控制，点击时直接切换类，一次点击就能生效。

方案二：获取计算后的样式 #

如果你不想改CSS结构，可以用getComputedStyle获取元素实际生效的样式，而不是只看内联样式：

let hamburgerIcon = document.getElementById('hamburger-icon'); 
let asideNavigation = document.getElementById('nav-list-wrapper'); 

hamburgerIcon.addEventListener("click", () => { 
  // 获取元素实际生效的left值
  const computedLeft = window.getComputedStyle(asideNavigation).left;
  // 判断是否处于隐藏状态（转换为数值后小于0）
  if (parseInt(computedLeft) < 0) { 
    asideNavigation.style.left = "0"; 
  } else { 
    asideNavigation.style.left = "-100vw"; 
  } 
});

注意：getComputedStyle返回的是像素值（比如-1920px），所以用parseInt转换后判断是否小于0更稳妥。

方案三：初始化内联样式 #

如果一定要保留原有的逻辑，可以在页面加载时给导航栏设置初始的内联样式：

let hamburgerIcon = document.getElementById('hamburger-icon'); 
let asideNavigation = document.getElementById('nav-list-wrapper'); 

// 初始化内联样式，确保初始值符合判断条件
asideNavigation.style.left = "-100vw";

hamburgerIcon.addEventListener("click", () => { 
  if (asideNavigation.style.left === "-100vw") { 
    asideNavigation.style.left = "0"; 
  } else { 
    asideNavigation.style.left = "-100vw"; 
  } 
});

这种方法能解决问题，但不如CSS类的方式灵活，后续修改样式还要改JS代码，不太推荐。

内容的提问来源于stack exchange，提问作者Ivan Rajkovača