本文介绍如何通过 JavaScript 动态切换按钮内 元素的 src 属性，在菜单展开（active）与收起状态间提供清晰的视觉提示，提升用户体验。
本文介绍如何通过 javascript 动态切换按钮内 `` 元素的 `src` 属性，在菜单展开（active）与收起状态间提供清晰的视觉提示，提升用户体验。
在构建响应式导航菜单（如汉堡菜单）时，仅靠 CSS 显隐控制往往不足以让用户直观感知当前状态。一个专业、友好的交互设计应配合图标变化——例如：默认显示「三横线」（☰）表示“可展开”，激活后切换为「叉号」（✕）表示“可关闭”。本文将基于原生 JavaScript 实现这一效果，无需依赖框架或额外库。
核心思路：监听点击事件 + 动态更新图片路径
关键在于：在点击触发 toggle('active') 的同时，同步判断按钮当前是否具有 active 类，并据此设置对应图标路径。注意，由于 是
以下是完整、健壮的实现代码：
const hamburger = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');
const imgIcon = hamburger.querySelector('img'); // 更可靠地获取 img 元素
hamburger.addEventListener('click', () => {
const isActive = hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
// 根据切换后的状态更新图标
if (isActive) {
imgIcon.src = 'https://placekitten.com/1440/672'; // “关闭”图标（示例）
} else {
imgIcon.src = 'https://placekitten.com/1440/671'; // “打开”图标（示例）
}
});✅ 推荐写法说明：
- 使用 hamburger.querySelector('img') 显式获取
元素，比依赖 e.target 更稳定（避免因点击按钮空白区域导致 e.target 不是
的边界情况）；
- classList.toggle() 返回布尔值（true 表示刚添加了类，false 表示刚移除了类），可直接用于条件判断，语义更清晰、逻辑更可靠；
- 图标路径建议使用语义化命名（如 icon-menu-open.svg / icon-menu-close.svg），便于维护。
注意事项与最佳实践
-
图片加载优化：若图标为 SVG 或小尺寸 PNG，建议内联为 Data URL 或使用
配合 srcset，避免切换时出现短暂空白； -
无障碍支持（a11y）：为
添加 alt 属性，如 alt="Open menu" 和 alt="Close menu"，并在状态切换时同步更新（可通过 imgIcon.alt = ... 实现）；
-
CSS 状态解耦：图标切换由 JS 控制，但样式（如过渡动画、尺寸）仍应交由 CSS 管理。例如可为
添加 transition: opacity 0.2s ease 提升平滑感；
- 防重复绑定：确保该事件监听器只执行一次（如置于 DOM 加载完成后），避免多次调用导致重复绑定。
总结
通过精准控制 DOM 元素属性与 CSS 类名的协同关系，我们能以极简代码实现高可用的交互反馈。本方案轻量、可复用、易扩展——后续如需支持深色模式图标、动效图标（Lottie/SVG animation）或国际化 alt 文本，均可在此结构上自然演进。记住：优秀的 UI 交互，始于对用户意图的即时、明确回应。
