HTML中通过aria-expanded标注折叠面板展开收起状态的方法

aria-expanded必须加在触发按钮上而非面板容器，需用JavaScript动态更新并与DOM可见性严格同步，配合aria-controls指向面板id，且面板须设role="region"或role="tabpanel"。

aria-expanded 必须加在触发按钮上，不是加在面板容器里；它必须和真实 DOM 可见性严格同步，否则屏幕阅读器会读错状态。

aria-expanded 该加在哪个元素上？

只加在触发展开/收起的交互控件上，比如 <button> 或带 href 的 <a>。不能加在 <div id="panel-1"> 这类被控制的内容区上——加了也无效，辅助技术完全感知不到。

• aria-controls 要指向面板的 id，所以按钮本身也得有 id（如 id="toggle-btn"），否则关联断裂
• 面板容器必须设 role="region"（或语义更明确的 role="tabpanel"），否则屏幕阅读器不知道这是个独立内容块
• 别写 <div role="button" tabindex="0" aria-expanded="false">——它不响应空格键，焦点管理不可靠；用原生 <button type="button"> 最稳妥

怎么动态更新 aria-expanded 的值？

不能靠 CSS 类切换“假装”状态变了，必须用 JavaScript 显式调用 setAttribute 更新属性值。顺序也很关键：先改视觉状态（比如 hidden 属性），再设 aria-expanded，否则读屏器可能播报错误。

• 展开时：btn.setAttribute('aria-expanded', 'true')
• 收起时：btn.setAttribute('aria-expanded', 'false')
• 别用 btn.ariaExpanded = true——这不是标准 DOM 属性，IE 和旧 Safari 不支持
• 判断真实状态要用 panel.hasAttribute('hidden') 或 panel.offsetHeight > 0，而不是只看 class 名

为什么图标没转、动画失效、读屏器读错？

aria-expanded 是给辅助技术看的状态快照，浏览器不会监听它来触发 CSS 重绘或 JS 逻辑。光靠属性值变化，什么都不会自动发生。

立即学习“前端免费学习笔记（深入）”；

• CSS 中写 [aria-expanded="true"] { transform: rotate(90deg); } 没用——属性是 JS 动态设置的，CSS 不响应变更
• 正确做法是同步操作：btn.setAttribute('aria-expanded', 'true') + btn.classList.add('is-expanded')，再用 .is-expanded 写样式
• 动画过渡失效，常因只设 max-height 却没配 overflow: hidden 和 transition；height: auto 无法参与 CSS 过渡，得用 JS 测量或改用 hidden + opacity 组合
• 服务端渲染时，初始 HTML 就得写对 aria-expanded="false" 和 hidden 状态，不能等 JS 加载后再补

最易被忽略的是：状态同步不是“一次设置就完事”，而是每次点击、键盘触发、甚至程序化展开都得检查真实 DOM 可见性、更新属性、同步 class、保障焦点流——漏掉任意一环，可访问性就断了。