咨询：移动端响应式顶部导航汉堡按钮点击切换背景色的实现方法

嘿，我懂你现在的困扰——用CSS的:active或:focus伪类确实达不到点击后持久变色的效果，因为这些伪类只会在用户按住按钮或者按钮获得焦点时生效，松开或失去焦点就会恢复原状。下面给你两个实用的实现方案，你可以根据自己的需求选：

方案1：JavaScript（最灵活常用） #

这是最直接的方式，通过给按钮添加点击事件，切换一个自定义的CSS类来改变背景色，还能顺便搭配导航菜单的展开/收起逻辑。

HTML结构 #

<button class="hamburger-btn">☰</button>

CSS样式 #

.hamburger-btn {
  background-color: #e2ae15; /* 默认橙色 */
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 加个过渡动画更丝滑 */
}

/* 自定义的激活状态类 */
.hamburger-btn.active {
  background-color: #ff4444; /* 切换后的红色 */
}

JavaScript代码 #

const hamburgerBtn = document.querySelector('.hamburger-btn');

hamburgerBtn.addEventListener('click', function() {
  this.classList.toggle('active'); // 点击时切换active类，实现颜色切换
});

方案2：纯CSS实现（无需JS依赖） #

如果你的场景不需要额外JS逻辑，也可以用HTML复选框配合CSS选择器来实现纯样式层面的切换。

HTML结构 #

<label class="hamburger-wrapper">
  <input type="checkbox" class="hamburger-checkbox">
  <span class="hamburger-btn">☰</span>
</label>

CSS样式 #

/* 隐藏原生复选框，只保留点击交互 */
.hamburger-checkbox {
  display: none;
}

.hamburger-btn {
  display: inline-block;
  background-color: #e2ae15; /* 默认橙色 */
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 利用复选框的选中状态，切换相邻按钮的背景色 */
.hamburger-checkbox:checked + .hamburger-btn {
  background-color: #ff4444; /* 切换后的红色 */
}

两种方案都能完美实现你要的“点击切换颜色，再次点击恢复默认”的效果，选适合你项目的就行~

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