汉堡按钮用三个而非单个，因需独立控制每条横线的旋转、位移和透明度动画；须添加aria-hidden="true"避免屏幕阅读器误读，并通过css的:nth-of-type()定位及transform-origin: center确保精准动画，javascript须同步更新aria-expanded与class以保证可访问性。
汉堡按钮的HTML结构为什么用<span></span>堆叠而不是单个<div>
<p>因为三根横线需要独立控制旋转、位移和透明度，单个元素无法实现三条线各自的动画轨迹。用三个<code><span></span>分别代表上、中、下横线，才能在CSS中对每个线条单独设置transform和opacity。
常见错误是把三根线写成<span></span><span></span><span></span>但没加class或aria-hidden="true"，导致屏幕阅读器误读为三个空元素。正确做法是给每个<span></span>加上语义化标识：
<button class="hamburger" aria-expanded="false" aria-label="菜单开关"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </button>
如何用CSS让三根<span></span>变成可动的汉堡线
核心是统一设置基础样式（宽高、背景色、绝对定位），再用:nth-of-type()区分每条线的位置和动画终点：
- 所有
<span></span>设display: block、width: 24px、height: 2px、background: #000、position: absolute - 第一条线：
top: 0，折叠态保持水平；展开态旋转45deg并下移 - 第二条线：
top: 8px，折叠态显示；展开态设opacity: 0 - 第三条线：
top: 16px，折叠态保持水平；展开态旋转-45deg并上移
注意：必须用transform-origin: center保证旋转中心在中点，否则会偏移；transition要写在<span></span>上而非父容器，否则动画不同步。
JavaScript切换时为什么aria-expanded和类名要同步更新
仅靠CSS类切换视觉状态，但辅助技术依赖aria-expanded判断当前菜单是否打开。如果只改class不改aria-expanded，NVDA或VoiceOver会读错状态。
实操建议用以下最小逻辑：
const btn = document.querySelector('.hamburger');
btn.addEventListener('click', () => {
const isExpanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !isExpanded);
btn.classList.toggle('active');
});
容易踩的坑：classList.toggle()在初始无active类时行为正常，但如果手动在HTML里写了class="hamburger active"但忘了同步aria-expanded="true"，就会造成状态不一致。
响应式断点下汉堡按钮该不该隐藏
不该直接display: none。因为隐藏后button失去焦点能力，键盘用户无法用Tab键操作，且aria-expanded值仍存在但不可交互，违反ARIA规范。
正确做法是用visibility: hidden + pointer-events: none，同时确保桌面端菜单用display: flex等替代方案呈现：
- 在
@media (min-width: 768px)里设置.hamburger { visibility: hidden; pointer-events: none; } - 同时确保桌面导航栏有对应
nav结构，且不依赖汉堡按钮的DOM存在 - 避免用
max-width断点反向隐藏——容易和移动端样式冲突
真正麻烦的是动画结束后DOM结构未重置：比如用户快速连点两次，transition来不及完成就触发第二次toggle，导致线条卡在半途。稳妥做法是在JS里加节流，或用transitionend事件校验状态。
