Bootstrap 学习之js插件（折叠（collapse）插件）

Posted 2020-07-22 zzjeny

Bootstrap 折叠（Collapse）插件

　　折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

用法

下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class：

Class	描述
.collapse	隐藏内容。
.collapse.in	显示内容。
.collapsing	当过渡效果开始时被添加，当过渡效果完成时被移除。

您可以通过以下两种方式使用折叠（Collapse）插件：

• 通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

  为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
        简单的可折叠组件
    </button>
    <div class="collapse " id="demo">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo.
    </div>

没有添加额外的 class .in的情况下，折叠的内容默认是没有打开的。

添加in的情况下是默认打开的，如下所示：

 <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
        简单的可折叠组件
    </button>
    <div class="collapse in" id="demo">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo.
    </div>

　　 <button type="button" class="btn btn-primary  collapsed" data-toggle="collapse" data-target="#demo">
        简单的可折叠组件
    </button>
    <div class="collapse" id="demo">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo.
    </div>

　　这个代码实现的效果是一样的；即默认隐藏区域，触发元素添加一个.collapsed样式。而且折叠的.in样式也要去除。

总结上面就是说.collapsed样式是表示该插件所对应的demo区域已经处于隐藏状态了，而collapse和in两个样式一起用的是块级显示状态，而单独的collapse样式则是隐藏状态。另外，该触发元素还可能有一个collapsing样式，该样式是在折叠区域进行隐藏显示动画过程中附加的。

　　通过上述两个例子和样式分析，我们知道了显示和隐藏的两个状态，其实该插件操作的也就是这些内容。可以为该插件总结以下两个基本的要点：

　　1、要标识插件的data-toggle=“collapse”以及表示折叠区域的data-target=“#demo”;

　　2、要正确设置折叠区域的显示/隐藏状态，以及触发元素的collapsed样式标记。

现在我们注意到这个只是单个的折叠区域的情况，针对手风琴风格，一般里面都会有多个折叠区域，而且显示一个折叠区域的时候，要关闭所有其他的折叠区域。

针对这种情况，可以根据前面几个插件的经验猜想出，要实现上述效果，就需要为手风琴定义一个大的容器元素来包涵所有的触发元素和折叠区域，在单击其中一个元素的时候，先关闭所有的折叠区域，再打开锁单击的区域，这样一来就实现了我们想要的效果了。

　　但是我们应该如何通过声明式用法来实现呢？答案是：Bootstrap给触发元素提供了一个data-parent属性，用于设置一个父容器，在处理的时候，会把这个容器里面的所有折叠区域都关闭，从而实现完美所说的手风琴效    <div class="panel-group" id="accordion"        <div class="panel panel-default">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        点击我进行展开，再次点击我进行折叠。第 1 部分
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        点击我进行展开，再次点击我进行折叠。第 2 部分
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse ">
                <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                        点击我进行展开，再次点击我进行折叠。第 3 部分
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                </div>
            </div>
        </div>
    </div>

 

1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
2. href 或 data-target 属性添加到父组件，它的值是子组件的 id。
3. data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

选项

有一些选项是通过 data 属性或 javascript 来传递的。下表列出了这些选项：

选项名称	类型/默认值	Data 属性名称	描述
parent	selector 默认值：false	data-parent	如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggle	boolean 默认值：true	data-toggle	切换调用可折叠元素。

方法

下面是一些折叠（Collapse）插件中有用的方法：

方法	描述	实例
Options:.collapse(options)	激活内容为可折叠元素。接受一个可选的 options 对象。	$(\'#identifier\').collapse({ toggle: false })
Toggle: .collapse(\'toggle\')	切换显示/隐藏可折叠元素。	$(\'#identifier\').collapse(\'toggle\')
Show: .collapse(\'show\')	显示可折叠元素。	$(\'#identifier\').collapse(\'show\')
Hide: .collapse(\'hide\')	隐藏可折叠元素。	$(\'#identifier\').collapse(\'hide\')