Chrome浏览器点击汉堡菜单时顶部导航栏颜色偶发未变更问题求解

• 样式值提前获取错误：脚本初始化阶段就一次性读取移动端导航栏背景色存入navColor，若此时CSS未加载完成、DOM未完成样式渲染，拿到的颜色值就是错误初始值，后续所有点击事件都会复用该错误值，导致颜色变更不生效。
• 菜单状态判断逻辑脆弱：使用mobNav.className === "on"全等判断识别菜单展开状态，只要该元素新增任何其他类名，该判断就会直接失效，无法触发颜色修改逻辑。
• 脚本执行时机风险：若脚本在DOM加载完成前执行，querySelector可能偶尔获取不到对应导航栏元素，后续逻辑直接报错中断。

将重复逻辑抽为公共函数，优化类名判断逻辑和样式取值时机，增加DOM加载监听避免元素获取失败，修复后的代码如下：

// ham.js
// 等待DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', () => {
  // For mobile hamburger
  const mobNav = document.querySelector("nav#mobile");
  const deskNav = document.querySelector("nav.desktop");
  const hamBtn = document.getElementsByClassName("ham")[0];
  const line2 = document.getElementById("line2");

  // 抽离公共的导航状态切换逻辑
  function toggleNavState() {
    hamBtn.classList.toggle("cross");
    line2.classList.toggle("none");
    mobNav.classList.toggle("on");
    mobNav.classList.toggle("off");
    // 实时获取最新的移动端导航背景色，避免提前取值错误
    const navColor = window.getComputedStyle(mobNav).getPropertyValue("background-color");
    // 用contains判断类名，兼容后续新增其他类的场景
    if(mobNav.classList.contains("on")){
      deskNav.style.backgroundColor = navColor;
    } else {
      deskNav.style.backgroundColor = "";
    }
  }

  hamBtn.addEventListener("click", (event) => {
    toggleNavState();
    event.stopPropagation();
  });

  // To close the navbar on clicking a link. 
  const mobileLis = document.querySelectorAll("nav#mobile a");
  Array.from(mobileLis).forEach(link => {
    link.addEventListener("click", event => {
      toggleNavState();
      event.stopPropagation();
    })
  })
})

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