利用bootstrap 4 完成折叠效果

开发工具与关键技术：Adobe Dreamweaver CC 2017 折叠
作者：孙水兵
撰写时间：2019年2月10

在平时，我们可能需要将一部分内容隐藏，再通过按钮在下方显示出来。这时，我们就可以通过bootstrap 4 中的Collapse来完成。
一、关于collapse

1. collapse 类用于指定一个折叠元素 (实例中的 div标签); 点击按钮后会在隐藏与显示之间切换。
2. 控制内容的隐藏与显示，需要在a>标签或 button标签 元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (<div id=“demo”)。
3. 注意:a标签元素上你可以使用 href 属性来代替 data-target 属性
   通过类更改显示和隐藏另一个class包含的元素：
   .collapse 隐藏内容
   .collapsing 带动态效果的切换
   .collapse.show 显示内容
   二、前期准备
   引入bootstrap 4 CSS文件（bootstrap.min.css）、JS文件（bootstrap.min.js）以及jQuery文件

<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
<script src="JS/jquery-3.2.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>

三、实例
在下方单个显示
HTML
用button写按钮，在button标签中用a标签写折叠，在a标签中加data-toggle="collapse"属性，在href中 写与内容对应类名（要加上类选择器）。再用div标签包裹隐藏的内容，在div中加class属性，class中加collapse以及href中相同的类名。然后再写要包裹的内容。

<button class="btn btn-primary"><a href=".bg-color" class="text-white" data-toggle="collapse">背景颜色</a></button>
<div class="collapse bg-color">
   <div class="card card-body">
    <ol>
   	<li class="bg-primary text-white">1. bg-primary(重要的背景颜色)</li>
   	<li class="bg-success text-white">2. bg-success(执行成功背景颜色)</li>
    </ol>
   </div>
</div>

多个目标
切换第一个元素按钮用a标签写，在a标签中加class属性，在class中加上btn的类与collapse，再加上data-toggle="collapse"属性，在href中 写与内容对应id（要加上id选择器）。切换第二个元素按钮与切换这两个元素按钮用button标签写，与a标签同样的加class属性，在class中加上btn的类与collapse，再加上data-toggle="collapse"属性，在切换第二个元素按钮中的data-target中 写与内容对应id（要加上id选择器）。在切换这两个元素按钮中的data-target中 写一个类名（要加上类选择器）。用网格布局写其隐藏的内容，在所有col下的标签中的class中加上在上方写切换这两个元素按钮中的data-target的类名。（如要刚开始时的内容为隐藏，将show去掉）。

<div>
<!--aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。
其它可选值：true表示元素是展开的；false表示元素不是展开的。-->
   <a class="btn btn-primary collapsed" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="true">
   切换第一个元素
   </a>
   <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="true">
   切换第二个元素
   </button>
   <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false">
   切换这两个元素
   </button>
   <div class="row">
   	<div class="col">
   		<div class="multi-collapse collapse show" id="multiCollapseExample1" style="">
   			<div class="card card-body"> 第一个元素 </div>
   		</div>
   	</div> 
   	<div class="col">
   		<div class="multi-collapse collapse show" id="multiCollapseExample2" style="">
   			<div class="card card-body">第二个元素</div>
   		</div>
   	</div>
   </div>
</div>

手风琴的例子
用bootstrap 4 中的卡片的样式来写，不过将header与body分开，其他的与多个目标类似。

<div class="accordion" id="accordionExample">
   <div class="card">
   	<div class="card-header">
   		<button class="btn btn-link h5 mb-0  collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false">可折叠组项目＃1</button>
   	</div>
   	<div id="collapseOne" class="collapse" style="">
   		<div class="card-body">内容1</div>
   	</div>
   </div>
   <div class="card">
   	<div class="card-header">
   		<button class="btn btn-link h5 mb-0 collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false">可折叠组项目＃2</button>
   	</div>
   	<div id="collapseTwo" class="collapse" style="">
   		<div class="card-body">内容2</div>
   	</div>
   </div>
   <div class="card">
   	<div class="card-header">
   		<button class="btn btn-link h5 mb-0 collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false">可折叠组项目＃3</button>
   	</div>
   	<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample" style="">
   		<div class="card-body">内容3</div>
   	</div>
   </div>
</div>