应使用元素实现展开按钮，因其原生支持键盘操作、屏幕阅读器识别和焦点管理；错误做法是用或模拟，需手动补全无障碍属性与事件监听。
展开按钮该用什么 HTML 元素
用 <button></button>，别用 <div> 或 <code><span></span> 模拟。前者原生支持键盘操作（空格/回车触发）、屏幕阅读器识别、焦点管理，后者要手动补一堆 tabindex、aria-expanded 和事件监听，容易漏。
常见错误是把按钮写成：<div class="toggle">▼</div> —— 这样无法键盘聚焦，也不被辅助技术感知，用户按 Tab 键直接跳过。
正确写法示例：
<button aria-expanded="false" aria-controls="submenu-1">产品</button>
如何用 CSS 实现平滑折叠动画
height: 0 + overflow: hidden 是最常用组合，但注意：不能直接对 height 做 transition，因为 height: auto 无法动画。得先用 JS 获取真实高度，再设为具体像素值。
更稳妥的做法是用 max-height 动画（配合足够大的值，如 max-height: 500px），并确保内容不会超出这个上限；或者改用 transform: scaleY() + opacity，性能更好，但视觉上是缩放而非“拉伸”。
要点：
- 不要用
display: none切换，它不支持过渡 -
hidden属性本身无动画能力，只是开关，需配合 CSS 动画控制显隐 - 若菜单项含图片或字体加载延迟，首次展开可能高度计算不准，建议加
font-display: swap和图片loading="eager"预热
JavaScript 控制展开/折叠状态的关键点
核心是同步三处状态：DOM 属性、CSS 类、aria-expanded 值。漏掉任意一项都可能导致可访问性问题或样式错乱。
常见疏漏：
- 点击后只改了
classList.toggle("open")，但忘了更新button.setAttribute("aria-expanded", "true") - 多级菜单中子菜单展开时，父级按钮的
aria-expanded没同步更新 - 使用
event.stopPropagation()过度，导致外层点击收起逻辑失效
推荐结构：
- 每个按钮绑定
click事件 - 通过
closest()找到对应菜单容器 - 用
getAttribute("aria-controls")定位目标<ul></ul> - 切换
hidden属性 +aria-expanded值 + CSS 类
移动端点击穿透和嵌套菜单的坑
iOS Safari 在快速连续点击时可能出现“穿透”：第一次点击展开，第二次点击却触发了下层菜单项的链接——本质是 touchend 和 click 事件时序混乱。
解决办法：
- 给按钮加
cursor: pointer和user-select: none - 在展开逻辑里加
event.preventDefault()（仅对click） - 更彻底的是用
pointer-events: none临时禁用菜单项，等动画结束再恢复
嵌套场景下，若子菜单也用相同类名（如 .submenu），JS 查询容易误选所有层级。务必用唯一 id 或 data-submenu-id 关联按钮与对应菜单，避免靠 DOM 层级硬匹配。
复杂点在于状态同步和事件隔离——菜单层级越深，aria-expanded 和 aria-hidden 的联动越容易出错，尤其在动态增删菜单项后没重置状态。手动维护比依赖框架更可控，但也更需要检查每处 toggle 调用是否完整。
