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

jhiyze9q  于 2023-03-09  发布在  其他
关注(0)|答案(3)|浏览(1140)

我想知道为什么点击时咏叹调没有展开。

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

brccelvz1#

该属性本身不会改变它的值,你需要在脚本中添加一些步骤,当你点击元素展开时,将该属性更改为“true”,当你再次点击关闭它时,将该属性更改回“false”。

9rbhqvlz

9rbhqvlz2#

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

Aria展开

元素的aria-expanded属性用于指示控件是展开还是折叠,以及其子元素是显示还是隐藏。
因此,你是一个应该根据内容是否扩展来更改该值。
艾瑞亚拥有
有两个声明可应用于控制另一个对象可见性的对象:aria-controlsaria-ownsaria-expanded的组合。
如果一个元素在视觉上、功能上或上下文中看起来“拥有”(是一个元素的祖先)一个元素,但实际上并不是DOM中该元素的祖先,则包括aria-owns以创建这种关系。
因此,如果要使用aria-expanded,还需要添加aria-owns,其中包括子节点的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>
xmq68pz9

xmq68pz93#

@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

相关问题