javascript - bootstrap 手风琴默认在桌面上显示,默认在移动设备上隐藏
问题描述
我对引导程序有点陌生,所以我不确定我会怎么做。
我有一个简单的引导手风琴,就像这个片段一样。它被分成多个手风琴,因为我希望它们能够相互独立地展开和折叠。(如可以展开并显示所有项目或不显示,不仅仅是一个展开而其他折叠)
我想禁用桌面上的展开和折叠并确保显示每个项目。但是在移动设备上,我只想显示第一个项目,而其他项目默认折叠。
任何关于我如何实现这一目标的建议将不胜感激。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1">
//heading
</button>
</div>
<div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading2">
<button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2">
//heading
</button>
</div>
<div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading3">
<button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3">
//heading
</button>
</div>
<div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
解决方案
我已经找到了解决方案,请在下面查看
用于桌面的 CSS
.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%;
height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}
移动 CSS
@media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}
HTML结构
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">Contect-1</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body">Content-2</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">Content-3</div>
</div>
</div>
</div>
推荐阅读
- android - 将数据写入微芯片 rn4870 vie ble
- c# - 如何将图像放置在按钮的最右端?
- ansible - Ansible 循环和打印字典变量
- transactions - 我们如何停止在 InterSystems IRIS 实例上记录日志?
- javascript - 重新格式化 JS 对象以获得年/月/周总计
- google-chrome-extension - Safari中的选项页面onMessage未收到sendMessage
- chromium - 转换失败。找不到 Chromium 二进制文件(尝试从 *[Project]\Chromium\ 加载)
- c++ - 如何在枚举中使用虚函数?
- typescript - 根据数组值获取联合类型的子集
- android - 我可以为可组合函数切换状态变量吗?