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

作者: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="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne" aria-expanded="false">part one</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                      <p>折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。</p>
                  </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-controls="collapseTwo" aria-expanded="false">part Two</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                  <div class="panel-body">
                      <p>折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。</p>
                  </div>
            </div>
        </div>


        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-controls="collapseThree" aria-expanded="false">part Three</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                  <div class="panel-body">
                      <p>折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。</p>
                  </div>
            </div>
        </div>
</div>

单击任意菜单，隐藏内容会展开，如果再点击同一个菜单就会隐藏；在一个菜单展开的情况下，点击另一个菜单的时候，展开的菜单内容就会被隐藏。

注意事项 ：

1. 使展开/折叠控件可访问
   请确保将展开的aria添加到控件元素中。此属性显式地定义可折叠元素的当前状态，如果可折叠元素在默认情况下是关闭的，那么它的值应该是aria-expanded=“false”。如果您已经使用in类将可折叠元素设置为默认打开，请改为在控件上设置aria-expanded=“true”。插件将根据可折叠元素是否已打开或关闭自动切换此属性。
   1. 如果控件元素的目标是单个可折叠元素，即data-target属性指向id选择器，则可以向control元素添加一个附加的aria-controls属性，其中包含可折叠元素的id。

使用方法

1. 通过data属性实现折叠

只需向元素添加data-toggle='collapse'和data-target=''，就可以对隐藏的折叠内容进行控制（通常在button或a标签上添加这两个属性）。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。确保将类collapse添加到可折叠元素中。如果希望它默认打开，请在中添加附加类 in。

要将类似accordion的组管理添加到可折叠控件中，请添加数据属性data-parent=“#selector”。

2. 通过javascript实现折叠

$('.collapse').collapse()

选项可以通过data属性或JavaScript传递。对于data属性，将选项名称附加到data-，如data parent=''。

调用方式

1. 使用选项时，JavaScript调用折叠插件的格式为：
$(".collapse").collapse(options)
在调用collapse() 方法时，可以包含一个配置对象，该对象包含 parent 和 toggle 两个配置参数。通过以下JavaScript代码，即可实现折叠插件的交互行为和动态效果：

$('.collapse').collapse({
   
   
      parent: "#accordion2"
);
$('.accordion-toggle').click(function() {
   
   
     $(this).parent().next().collapse('toggle');
});

2. .collapse('toggle')：让一个可折叠元素在显示和隐藏之间切换。
3. .collapse('show')：显示一个可折叠元素。
4. .collapse('hide')：隐藏一个可折叠元素。

折叠插件的事件

Bootstrap还为折叠组件提供了一组事件，通过这些事件，可以监听用户的行为及折叠组件的状态。

$('#myCollapsible').on('hidden.bs.collapse', function () {
   
   
 alert('内容已隐藏')；
})

就先分享到这里!! :smile: 后续继续更新!!