Question

我已经下载了此模板

https://startbootstrap.com/themes/sb-admin-2/

其中有一个名为cards.html的页面

在该页面上是可折叠卡片的示例。我试图将其加载成折叠状态，并且用户必须对其进行扩展。因此，我将本节更改为：

<div class="card shadow mb-4">
<!-- Card Header - Accordion -->
<a href="#collapseCardExample" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseCardExample">
  <h6 class="m-0 font-weight-bold text-primary">Collapsable Card Example</h6>
</a>
<!-- Card Content - Collapse -->
<div class="collapse show" id="collapseCardExample">
  <div class="card-body">
    This is a collapsable card example using Bootstrap's built in collapse functionality. <strong>Click on the card header</strong> to see the card body collapse and expand!
  </div>
</div>
</div>

它确实有：

aria-expanded="true"

但是我把它弄错了。

为什么它仍按展开加载？

Answer 1

Bootstrap不依赖aria事物，它使用自己的data属性。（{aria用于屏幕阅读器。

要隐藏它，请从show中删除collapseCardExample类。参见https://getbootstrap.com/docs/4.3/components/collapse/

aria-expanded =“ false”在引导模板中不起作用

1 个答案: