>我已经下载了这个模板
https://startbootstrap.com/themes/sb-admin-2/
里面有一页叫做卡片.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"
但我把它弄错了。
为什么它仍然以扩展形式加载?
Bootstrap 不依赖于aria
事物,它使用自己的data
属性。(aria
适用于屏幕阅读器。
要隐藏它,请从collapseCardExample
中删除show
类。请参阅 https://getbootstrap.com/docs/4.3/components/collapse/
在引导 5 中,只需将class="accordion-collapse collapse show"
替换为您最初不想打开的那些class="accordion-collapse collapse"
。 它对我有用!