求助：实现点击时切换Span式hamburger menu的颜色（黑白色互转）

你不需要额外修改核心JavaScript逻辑，利用现有的active类切换就能实现颜色变化，先帮你修复代码里的一个关键小错误：

1. 修正JavaScript的选择器错误 #

你代码里的document.querySelector(".nav.link")是错误写法，应该用document.querySelectorAll(".nav-link")获取所有导航链接，否则点击菜单选项无法关闭菜单。修正后的JS代码：

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

// 修正选择器并获取所有导航链接
document.querySelectorAll(".nav-link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);

2. 添加CSS实现颜色切换 #

在现有CSS基础上，给激活状态的汉堡菜单添加白色bar样式即可。当菜单打开时hamburger会带上active类，此时bar自动变白色；关闭时active类移除，bar恢复黑色：

/* 保留原有.bar样式 */
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

/* 新增激活状态的白色样式 */
.hamburger.active .bar {
  background-color: white;
}

完整可运行代码示例 #

HTML #

<nav id="nav" class="navbar">
          <ul class="nav-menu">
            <li id="current" class="nav-item">
              <a
                href="file:///C:/Users/.../index.html"
                class="nav-link"
                >Home</a
              >
            </li>
            <li>
              <a
                href="file:///C:/Users/.../about.html"
                class="nav-link"
                >About</a
              >
            </li>
          </ul>
          <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
          </div>
        </nav>

CSS #

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

/* 激活状态的白色bar */
.hamburger.active .bar {
  background-color: white;
}

@media (max-width: 1000px) {
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 0px;
    gap: 0;
    flex-direction: column;
    background-color: black;
    width: 100%;
    text-align: center;
  }

  .nav-item {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
  }

  .nav-menu.active {
    left: 0;
  }

  .menu a {
    color: white;
  }
}

JavaScript #

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

document.querySelectorAll(".nav-link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);

这样修改后，点击汉堡菜单时，三个bar会随着active类的切换自动在黑色和白色之间变化，完全符合你的需求。

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