我想知道为什么点击时咏叹调没有展开。
<div class="tooltip filter-tooltip" tabindex="0" role="button" aria-label="Vaccine Brand More Information" aria-expanded="false" aria-controls="filter_dialog" \>
brccelvz1#
该属性本身不会改变它的值,你需要在脚本中添加一些步骤,当你点击元素展开时,将该属性更改为“true”,当你再次点击关闭它时,将该属性更改回“false”。
9rbhqvlz2#
ARIA是一组属性,用于定义使Web内容和Web应用程序更易于残障人士访问的方法。
元素的aria-expanded属性用于指示控件是展开还是折叠,以及其子元素是显示还是隐藏。因此,你是一个应该根据内容是否扩展来更改该值。艾瑞亚拥有有两个声明可应用于控制另一个对象可见性的对象:aria-controls或aria-owns与aria-expanded的组合。如果一个元素在视觉上、功能上或上下文中看起来“拥有”(是一个元素的祖先)一个元素,但实际上并不是DOM中该元素的祖先,则包括aria-owns以创建这种关系。因此,如果要使用aria-expanded,还需要添加aria-owns,其中包括子节点的id。
aria-expanded
aria-controls
aria-owns
<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>
xmq68pz93#
@Monstar的答案是正确的:aria-expanded属性只是一种使残疾人更容易访问您的页面的方法。当可折叠项目的默认值被展开(即显示)时,它应该是true。当可折叠项目的默认值被折叠(即隐藏)时,它应该是false。
true
false
要更改Bootstrap 5中可折叠项的默认行为,您必须向可折叠项添加或删除类show。例如:
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
3条答案
按热度按时间brccelvz1#
该属性本身不会改变它的值,你需要在脚本中添加一些步骤,当你点击元素展开时,将该属性更改为“true”,当你再次点击关闭它时,将该属性更改回“false”。
9rbhqvlz2#
ARIA是一组属性,用于定义使Web内容和Web应用程序更易于残障人士访问的方法。
Aria展开
元素的
aria-expanded
属性用于指示控件是展开还是折叠,以及其子元素是显示还是隐藏。因此,你是一个应该根据内容是否扩展来更改该值。
艾瑞亚拥有
有两个声明可应用于控制另一个对象可见性的对象:
aria-controls
或aria-owns
与aria-expanded
的组合。如果一个元素在视觉上、功能上或上下文中看起来“拥有”(是一个元素的祖先)一个元素,但实际上并不是DOM中该元素的祖先,则包括
aria-owns
以创建这种关系。因此,如果要使用
aria-expanded
,还需要添加aria-owns
,其中包括子节点的id。xmq68pz93#
@Monstar的答案是正确的:aria-expanded属性只是一种使残疾人更容易访问您的页面的方法。当可折叠项目的默认值被展开(即显示)时,它应该是
true
。当可折叠项目的默认值被折叠(即隐藏)时,它应该是false
。要更改Bootstrap 5中可折叠项的默认行为,您必须向可折叠项添加或删除类
show
。例如: