如何在按钮添加active类时切换图片，实现菜单展开/收起功能

需求说明 #

现有一个汉堡导航菜单组件，点击小猫图标按钮时，按钮会添加active类，侧边导航菜单nav-menu随之显示。需要实现：菜单展开时将小猫图标替换为关闭图标，让用户明确可点击关闭菜单。

修改后的完整代码 #

HTML

<div class="main-nav">
  <div class="hamburger-icon">
    <button class="mobile-menu-toggle">
      <!-- 汉堡状态图标（小猫） -->
      <img class="menu-icon hamburger" src="https://placekitten.com/1440/671" height="24" width="24" alt="打开菜单"/>
      <!-- 关闭状态图标 -->
      <img class="menu-icon close" src="https://placekitten.com/1440/670" height="24" width="24" alt="关闭菜单"/>
    </button>
  </div>
  <div class="heading">My menu
    <ul class="nav-menu">
      <li>Home</li>
      <li>About</li>
      <li>Sign up</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

CSS

body {
  margin: 0;
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: grey;
  min-height: 56px;
  padding-left: 16px;
  padding-right: 16px;
}

.hamburger-icon {
  display: flex;
  width: 16.67%;
}

.mobile-menu-toggle {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

/* 默认只显示汉堡图标 */
.menu-icon.close {
  display: none;
}

/* 按钮激活时切换图标显示状态 */
.mobile-menu-toggle.active .menu-icon.hamburger {
  display: none;
}
.mobile-menu-toggle.active .menu-icon.close {
  display: block;
}

.heading {
  display: flex;
  width: 58%;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: -100%;
  top: 56px;
  gap: 0;
  width: 100%;
}

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

JavaScript

const hamburger = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');

// 切换菜单状态
hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active');
    navMenu.classList.toggle('active');
});

实现原理 #

1. 在按钮内嵌入两张图标：默认显示的汉堡（小猫）图标、菜单展开时显示的关闭图标
2. 通过CSS默认隐藏关闭图标，当按钮添加active类时，自动切换两张图标的显示状态
3. 原有JS逻辑无需大幅修改，仅维护active类的切换即可，图标切换完全由CSS控制，实现逻辑与样式的分离

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