- 可使用
<a></a>标签或<button></button>进行控制 - 需要折叠的内容放在
.collapse里，为其创建.card类，内容放里面 - 使用
href或data-target控制链接位置 - 必须设置
data-toggle="collapse"进行切换效果的实现 练习：
<a class="btn btn-primary" href="#one" data-toggle="collapse">
按钮1
</a>
<button class="btn btn-primary" href="#one" data-toggle="collapse">
按钮2
</button>
<div class="collapse" id="one">
<div class="card card-body">
这是一个内容主体，点击按钮时出现
</div>
</div>
多内容切换：
- 给每个内容块设置
id - 给内容设置
.multi-collapse类属性 - 给按钮设置
data-target=".multi-collapse"属性 练习：
<p>
<a class="btn btn-info" data-toggle="collapse" href="#left" role="button" aria-expanded="false" aria-controls="left">按钮左</a>
<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#right" aria-expanded="false" aria-controls="right">按钮右</button>
<button class="btn btn-info" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multi-collapse">按钮全部</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="left">
<div class="card card-body">
这是左边的文字
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="right">
<div class="card card-body">
这是右边的文字
</div>
</div>
</div>
</div>
手风琴样式：
- 第一个内容块设置
.show类属性进行显示 - 其他内容块设置
data-parent="#accordionExample"属性，只能显示一个面板内容 练习:
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
列表一
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
11111111111
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
列表二
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
222222222222
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
列表三
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
3333333333333
</div>
</div>
</div>
</div>
