本文介绍如何通过 JavaScript 动态切换按钮内 元素的 src 属性，配合 CSS 类控制，实现在移动端汉堡菜单展开/收起时自动更换图标（如“三横线”→“叉号”），提升用户交互反馈的清晰度与专业性。
本文介绍如何通过 javascript 动态切换按钮内 `` 元素的 `src` 属性，配合 css 类控制，实现在移动端汉堡菜单展开/收起时自动更换图标（如“三横线”→“叉号”），提升用户交互反馈的清晰度与专业性。
在构建响应式导航菜单时，视觉状态反馈至关重要。一个典型的汉堡菜单按钮不仅需控制菜单显隐，还应通过图标变化明确传达当前状态（“点击可展开” vs “点击可关闭”）。本文提供一种轻量、可靠且无需额外 DOM 操作的实现方案：监听按钮点击事件，在切换 .active 类的同时，同步更新 的 src 属性。
核心实现逻辑
关键在于利用 classList.toggle() 后立即检查元素是否已包含 active 类，并据此设置对应图标路径。注意：事件对象 e 的 target 是被点击的 元素（因
const hamburger = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', (e) => {
// 切换按钮和菜单的 active 状态
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
// 根据当前 active 状态动态切换图标
const img = e.target;
if (hamburger.classList.contains('active')) {
img.src = 'https://placekitten.com/1440/672'; // 关闭图标（示例：X 形）
} else {
img.src = 'https://placekitten.com/1440/671'; // 开启图标（示例：三横线）
}
});✅ 推荐实践：将图标 URL 提取为常量，增强可维护性：
const ICON_OPEN = 'https://placekitten.com/1440/671'; const ICON_CLOSE = 'https://placekitten.com/1440/672'; // … 在条件分支中使用 ICON_OPEN / ICON_CLOSE
注意事项与优化建议
-
确保事件委托准确：本例中
是
-
图标加载容错：为防止图片加载失败导致空白，可在
上添加 onerror 处理或使用 CSS background-image 替代方案（适用于更复杂的图标系统）。
-
无障碍支持（a11y）：仅靠图标无法满足屏幕阅读器需求。建议为按钮添加语义化 aria-expanded 属性，并随状态同步更新：
hamburger.setAttribute('aria-expanded', hamburger.classList.contains('active')); - CSS 状态解耦：图标切换由 JS 控制，而菜单显隐完全交由 CSS（.nav-menu.active { left: 0; }），符合关注点分离原则，便于样式维护与动画扩展。
通过上述方法，你可以在不引入框架、不增加 DOM 节点的前提下，高效、可预测地实现菜单开关状态的视觉映射，显著提升用户体验的专业感与一致性。
