Bootstrap JavaScript插件：折叠内容插件 (collapse.js)

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。

实例

• .collapse 隐藏内容
• .collapsing 在转换期间应用
• .collapse.in显示内容

可以使用带有href属性的链接，或具有数据目标属性的按钮。在这两种情况下，都需要data-toggle=“collapse”。单击下面的按钮以通过类更改显示和隐藏另一个元素：

<a href="#collapseAnli" class="btn btn-primary" role="button" data-toggle="collapse" aria-controls="collapseAnli">带href属性链接</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseAnli" aria-controls="collapseAnli">带有data-target的按钮</button>
<div class="collapse" id="collapseAnli">
	<div class="well">
		<p>可以使用带有href属性的链接，或具有数据目标属性的按钮。在这两种情况下，都需要data -toggle=“collapse”。单击下面的按钮以通过类更改显示和隐藏另一个元素</p>
	</div>
</div>

---

手风琴的折叠菜单
扩展默认折叠行为以创建面板组件一致的折叠。

<div class="panel-group" id="accordion" role