Bootstrap 折叠（Collapse）插件

女爷i 2022-03-21 13:55 463阅读 0赞

### Bootstrap 折叠（Collapse）插件 ###

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

## 用法 ##

<table> 
 <tbody> 
  <tr> 
   <th>Class</th> 
   <th>描述</th> 
   <th>&nbsp;</th> 
  </tr> 
  <tr> 
   <td>.collapse</td> 
   <td>隐藏内容。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.collapse.in</td> 
   <td>显示内容。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.collapsing</td> 
   <td>当过渡效果开始时被添加，当过渡效果完成时被移除。</td> 
  </tr> 
 </tbody> 
</table>

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

*  **通过 data 属性**：向元素添加 **data-toggle="collapse"** 和 **data-target**，自动分配可折叠元素的控制。**data-target** 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class **.collapse**。如果您希望它默认情况下是打开的，请添加额外的 class **.in**。
    
    为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 **data-parent="\#selector"**。
 *  **通过 JavaScript**：可通过 JavaScript 激活 collapse 方法，如下所示：
    
        $('.collapse').collapse()

### 一、基本使用 ###

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

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                Button with data-target
            </button>
            <div class="collapse" id="collapseExample">
                <div class="well">
                    折叠
                </div>
            </div>

![20190202104008750.png][]

### 二、折叠和面板使用： 手风琴效果 ###

<div class="panel-group" id="pg">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#pg" href="#collapseOne">
                                点击我进行展开，再次点击我进行折叠。第 1 部分
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            第 1 部分
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#pg" href="#collapseTwo">
                                点击我进行展开，再次点击我进行折叠。第 2 部分
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            第 2 部分
                        </div>
                    </div>
                </div>
            </div>

![20190202105945588.png][]

### 三、Javascript 实现手风琴效果 ###

## 选项 ##

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

<table> 
 <tbody> 
  <tr> 
   <th>选项名称</th> 
   <th>类型/默认值</th> 
   <th style="width:147px;">Data 属性名称</th> 
   <th style="width:549px;">描述</th> 
  </tr> 
  <tr> 
   <td>parent</td> 
   <td>selector<br><em>默认值：false</em></td> 
   <td style="width:147px;">data-parent</td> 
   <td style="width:549px;">如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。</td> 
  </tr> 
  <tr> 
   <td>toggle</td> 
   <td>boolean<br><em>默认值：true</em></td> 
   <td style="width:147px;">data-</td> 
  </tr> 
 </tbody> 
</table>

### 方法  ###

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th style="width:332px;">描述</th> 
   <th style="width:328px;">实例</th> 
  </tr> 
  <tr> 
   <td><strong>Options:</strong>&nbsp;.collapse(options)</td> 
   <td style="width:332px;">激活内容为可折叠元素。接受一个可选的 options 对象。</td> 
   <td style="width:328px;"> <pre>$('#identifier').collapse({
&nbsp;&nbsp;&nbsp;&nbsp;toggle: false
})</pre> </td> 
  </tr> 
  <tr> 
   <td><strong>Toggle:</strong>&nbsp;.collapse('toggle')</td> 
   <td style="width:332px;">切换显示/隐藏可折叠元素。</td> 
   <td style="width:328px;"> <pre>$('#identifier').collapse('toggle')</pre> </td> 
  </tr> 
  <tr> 
   <td><strong>Show:</strong>&nbsp;.collapse('show')</td> 
   <td style="width:332px;">显示可折叠元素。</td> 
   <td style="width:328px;"> <pre>$('#identifier').collapse('show')</pre> </td> 
  </tr> 
  <tr> 
   <td><strong>Hide:</strong>&nbsp;.collapse('hide')</td> 
   <td style="width:332px;">隐藏可折叠元素。</td> 
   <td style="width:328px;"> <pre>$('#identifier').collapse('hide')</pre> </td> 
  </tr> 
 </tbody> 
</table>

事件不怎么用

<div class="panel-group" id="pg">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#" id="collapseOneBtn">
                                点击我进行展开，再次点击我进行折叠。第 1 部分
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            第 1 部分
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#" id="collapseTwoBtn">
                                点击我进行展开，再次点击我进行折叠。第 2 部分
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            第 2 部分
                        </div>
                    </div>
                </div>
            </div>

**Javascript**

$(function () {
        $("#collapseOneBtn").on("click",function () {
            $("#collapseOne").collapse({
                parent: $("#pg")
            }).collapse("toggle");
        })
        $("#collapseTwoBtn").on("click",function () {
            $("#collapseTwo").collapse({
                parent: $("#pg")
            }).collapse("toggle");
        })
    });

详情参考官网或菜鸟教程：[http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html][http_www.runoob.com_bootstrap_bootstrap-collapse-plugin.html]

[20190202104008750.png]: /images/20220321/474bdf593963486bb644a19efcd89fd0.png
[20190202105945588.png]: /images/20220321/8cfc18eb4e024b629d7bc4c45104b50c.png
[http_www.runoob.com_bootstrap_bootstrap-collapse-plugin.html]: http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html