安全切换 aria-expanded 必须与 DOM 可见性严格同步：先更新内容区 hidden/display，再设置 aria-expanded 字符串值或用 toggleAttribute；需绑定在触发按钮上并配对 aria-controls，推荐优先使用原生 。
点击按钮时怎么安全切换 aria-expanded 的值
不能只改 aria-expanded 就完事，必须和真实 DOM 可见性严格同步。常见错误是：内容已显示，但 aria-expanded 还是 "false"，屏幕阅读器就会说“已收起”，实际却能看到内容——语义和视觉彻底错位。
- 用
getAttribute('aria-expanded') === 'true'判断当前状态，别用!!button.getAttribute('aria-expanded')（"false"字符串会被转成true） - 设置时必须传字符串：
button.setAttribute('aria-expanded', 'true')或button.setAttribute('aria-expanded', 'false')，别传布尔值true/false - 推荐现代写法：
button.toggleAttribute('aria-expanded', isExpanded)，它会自动增删属性并设对值（注意第二个参数是布尔值） - 更新时机要准：先改内容区的
hidden或display，再设aria-expanded；顺序反了，AT 可能读到旧状态
为什么 onclick 里直接切 display 不够用
aria-expanded 是给辅助技术看的语义标记，不是 CSS 触发器。只操作 style.display = 'none' 或切 class，aria-expanded 值不会自动变——屏幕阅读器根本不知道状态变了。
- JS 必须显式调用
setAttribute或toggleAttribute - 如果用
hidden属性控制显隐，记得同步：content.hidden = !isExpanded，再设aria-expanded - 别在 CSS 动画的
transitionend回调里更新aria-expanded——辅助技术不等动画，得在视觉变化前或同时更新 - 键盘操作（空格/回车）也要走同一套逻辑，否则键盘用户和鼠标用户的体验就分裂了
aria-expanded 绑错位置会导致完全失效
它必须加在触发按钮上，比如 <button></button>，而不是被控制的内容容器上。绑错地方，屏幕阅读器压根收不到状态变更通知。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 正确：
<button id="toggle-1" aria-expanded="false" aria-controls="panel-1">标题</button><div id="panel-1">内容</div> - 错误：
<button>标题</button><div aria-expanded="false">内容</div>（这个aria-expanded对 AT 完全无效） - 如果用
<div role="button"> 模拟按钮，必须带 <code>role="button"，否则aria-expanded不被识别 -
aria-controls的值必须精确匹配目标容器的id，拼错、ID 不存在、多个按钮共用一个 ID 都会让关联断裂 - Chrome 12+、Firefox 49+、Safari 6+、Edge 79+ 全支持，IE 不支持——如果你不需要兼容 IE，这就是最优解
- 想自定义样式？在外层包个容器，用 CSS 覆盖
summary::marker或重置默认箭头，别破坏内部结构 - 非要用自定义按钮？那就得手动同步四件事：DOM 显隐、
aria-expanded、aria-hidden（或hidden）、视觉反馈类（比如is-expanded）——漏掉任意一环，可访问性就断了
要不要自己手写这套逻辑
没必要。优先用原生 <details><summary></summary></details>，它自动处理 aria-expanded、键盘支持、焦点管理，连 aria-controls 和 role 都不用你操心。
立即学习“前端免费学习笔记（深入）”；
