aria-expanded是给屏幕阅读器等辅助技术使用的，值为true或false，必须加在触发按钮上而非内容容器，并通过setattribute动态更新以准确传达展开状态。

aria-expanded 是给谁用的？

它不是装饰，是给屏幕阅读器听的。值为 true 或 false，告诉辅助技术“这个按钮当前控制的内容是展开还是收起”。
常见错误是把它加在内容容器上，比如 <div class="dropdown-menu">，结果屏幕阅读器完全感知不到状态变化。<br> 必须加在触发元素上，典型场景包括： <ul> <li> <code><button></button> 控制折叠面板

下拉菜单的 toggle 按钮（如 Bootstrap 的 <button data-bs-toggle="dropdown"></button>）

移动端 navicon 按钮

如果触发元素没 id，aria-controls 就失效，别漏掉。

怎么更新 aria-expanded 才算有效？

不能只改 CSS 类或 DOM 显示状态就完事。辅助技术不看样式，只认属性值。
必须用 element.setAttribute('aria-expanded', 'true') 或 'false' 显式设置。
以下写法无效或不可靠：

• element.ariaExpanded = true（非标准属性，IE/旧 Safari 不支持）
• 仅切换 hidden 属性却不更新 aria-expanded
• 在 React/Vue 中只更新组件 state，但没同步操作 DOM 属性

尤其注意动画场景：不要在 transition 开始时就设 aria-expanded="true"，等 transitionend 或 requestAnimationFrame 确保渲染完成后再更新。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

aria-expanded 和 aria-haspopup 要不要一起用？

要，但作用不同，不能互相替代。
aria-haspopup 声明“这个元素可能弹出什么”，比如 menu、listbox；它是个静态声明，一般初始化设好就行。
aria-expanded 反映“此刻是否已弹出”，是动态状态，必须随交互实时更新。
典型组合写法：
<button aria-haspopup="menu" aria-expanded="false">菜单</button>
<ul id="menu" role="menu" hidden></ul>
两者配合，屏幕阅读器才能准确读出：“菜单按钮，未展开，可打开菜单”。

为什么内容区不能加 aria-hidden？

因为被展开的内容是页面主结构的一部分，不是模态层或临时遮罩。
加 aria-hidden="true" 会让屏幕阅读器彻底跳过它，哪怕它已经 display: block 且可见。
正确做法是：

• 内容区用 role="region" 或更具体的 role="menu"/role="listbox"
• 通过 id 与 aria-controls 关联
• 隐藏时用 hidden 或 display: none，但确保 aria-expanded 值同步为 false

最常出问题的是 JS 报错中断、CSS 类没清干净、或者状态更新和 DOM 渲染错帧——差一帧，语义就断了。