本文介绍如何在移动端汉堡菜单中，通过监听按钮点击事件动态替换 的 src 属性，使图标随 active 状态实时切换（如“三横线”→“叉号”），直观传达菜单的展开/收起状态。
本文介绍如何在移动端汉堡菜单中，通过监听按钮点击事件动态替换 `` 的 `src` 属性，使图标随 `active` 状态实时切换（如“三横线”→“叉号”），直观传达菜单的展开/收起状态。
在响应式导航设计中，汉堡按钮（hamburger toggle）不仅是功能入口，更是用户理解当前界面状态的关键视觉线索。仅靠 CSS 控制菜单显隐（如 left: -100% ↔ left: 0）不足以提供明确的状态反馈；若图标保持不变，用户可能无法判断菜单当前是打开还是关闭——尤其在快速连续操作或无障碍访问场景下，这会显著降低可用性。
理想的解决方案是：将图标切换逻辑与 DOM 状态同步绑定。核心思路是：在点击事件中，先触发 classList.toggle('active')，再根据切换后的实际状态决定图标资源：
const hamburger = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');
const img = hamburger.querySelector('img'); // 精准定位内部 img 元素
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
// 根据当前 active 状态动态设置图标
if (hamburger.classList.contains('active')) {
img.src = 'https://placekitten.com/1440/672'; // “关闭”图标（示例：叉号）
} else {
img.src = 'https://placekitten.com/1440/671'; // “打开”图标（示例：三横线）
}
});✅ 关键优化点说明：
- 使用 hamburger.querySelector('img') 显式获取子元素，避免依赖 e.target 可能指向父按钮而非图片本身（例如用户点击按钮边框时）；
- 将状态判断置于 classList.toggle() 之后，确保读取的是最新真实状态；
- 图标 URL 应使用语义化命名（如 icon-hamburger.svg / icon-close.svg），生产环境推荐使用本地 SVG 或内联 SVG 以提升加载性能与可访问性；
- 若需支持高对比度模式或暗色主题，建议配合 prefers-color-scheme 媒体查询或 CSS 自定义属性统一管理图标颜色。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 避免直接操作 e.target.src（原答案写法），因事件目标可能是
- 图片加载失败时应提供 alt 文本与 onerror 回退机制（如 img.onerror = () => img.src = '/fallback-icon.svg';）；
- 对于屏幕阅读器用户，建议为按钮添加 aria-expanded 属性并同步更新：
hamburger.setAttribute('aria-expanded', hamburger.classList.contains('active'));
通过以上实现，你不仅完成了视觉反馈闭环，更提升了交互的可预测性与包容性——这是现代前端组件开发中「状态即视图」原则的典型实践。
