html - Bootstrap 4在手风琴面板中保持打开其他面板
问题描述
我有使用 bootstrap 4 的手风琴菜单,如下所示:
<div id="main">
<div class="accordion" id="faq">
<div class="card">
<div class="card-header" id="faqhead1">
<a href="#" class="btn btn-header-link" data-toggle="collapse" data-target="#faq1" aria-expanded="true" aria-controls="faq1">S.S.S</a>
</div>
<div id="faq1" class="collapse show" aria-labelledby="faqhead1" data-parent="#faq">
<div class="card-body">
Body Content
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead2">
<a href="#" class="btn btn-header-link" data-toggle="collapse" data-target="#faq2" aria-expanded="true" aria-controls="faq2">S.S.S</a>
</div>
<div id="faq2" class="collapse " aria-labelledby="faqhead2" data-parent="#faq">
<div class="card-body">
Body Content
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqhead3">
<a href="#" class="btn btn-header-link" data-toggle="collapse" data-target="#faq3" aria-expanded="true" aria-controls="faq3">S.S.S</a>
</div>
<div id="faq3" class="collapse " aria-labelledby="faqhead3" data-parent="#faq">
<div class="card-body">
Body Content
</div>
</div>
</div>
</div>
</div>
在单击每个card-header
元素后的操作中,打开/显示该元素和其他元素(card-body
)关闭/隐藏。我需要在单击每个元素后,其他元素不会关闭/隐藏。
演示:这里
解决方案
推荐阅读
- c++ - 如何在一个类中对一个数据结构进行模板化(同一个 .h 文件)
- javascript - 如何让这个按钮触发适当的事件
- azure-data-explorer - 如何检查给定数据库中所有表的表级策略(例如缓存)?
- html - Shopify Liquid:连续 for 循环无序迭代
- docker - Docker 不会将文件复制到创建的目录
- java - 如何在 java 条件语句中使用 or ,例如 if (a or b != c)
- javascript - Javascript `await` "SyntaxError: Unexpted identifier" 即使我在 `async` 函数中等待
- r - 如何从协方差矩阵中获取唯一对?
- puppeteer - 通过句柄循环获取内部元素文本
- php - 如何修复“将元素添加到数组而不是替换它”?