aria-expanded 即使在元素展开时也显示 false

Answer 1

该属性不会自行更改其值。您需要在脚本中添加一些步骤，当您单击要展开的元素时将属性更改为“true”，并在您再次单击以关闭它时返回“false”。

Answer 2

ARIA 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序的方法。

咏叹调展开

aria-expanded

属性设置在元素上以指示控件是展开还是折叠，以及它的子元素是显示还是隐藏。

所以你是那个应该根据内容是否扩展来更改该值。

Aria拥有

有两个声明可以应用于控制另一个对象可见性的对象：

aria-controls

，或

aria-owns

与

aria-expanded

组合。

如果一个元素在视觉上、功能上或上下文上看起来“拥有”（成为）一个元素的祖先，但实际上在 DOM 中并不是该元素的祖先，则包含

aria-owns

以创建该关系。

所以你还需要添加

aria-owns

，如果你要使用

aria-expanded

，它包括孩子的id。

<div 
  class="tooltip filter-tooltip" 
  tabindex="0" 
  role="button" 
  aria-label="Vaccine Brand More Information" 
  aria-expanded="false" 
  aria-controls="filter_dialog"
  aria-owns="children"
\>
<div id="children"> 
  ...
</div> 

Answer 3

@Monstar 的回答是正确的：aria-expanded 属性只是一种让您的页面更易于残障人士访问的方法。当可折叠项目的默认展开（即显示）时，它应该是

true

。当可折叠项目的默认折叠（即隐藏）时，它应该是

false

。

要更改 Bootstrap 5 中可折叠项目的默认行为，您必须添加或删除类

show

到可折叠项目。例如

<div class="collapse show multi-collapse" id="multiCollapseExample1">
// collapsable item will be shown by default
</div>

<div class="collapse multi-collapse" id="multiCollapseExample1">
// collapsable item will be hidden by default
</div