Bootstrap 折叠（Collapse）插件

Bootstrap折叠（Collapse）插件折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。如果您想要单独引用该插件的功能，那么您需要引用collapse.js。同时，也需要在您的Bootstrap版本中引用Transition（过渡）插件。或者，正如Bootstrap插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。您可以使用折叠（Collapse）插件：创建可折叠的分组或折叠面板（accordion），如下所示：实例<divclass="panel-group"id="accordion"><divclass="panelpanel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseOne">点击我进行展开，再次点击我进行折叠。第1部分</a></h4></div><divid="collapseOne"class="panel-collapsecollapsein"><divclass="panel-body">Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.</div></div></div><divclass="panelpanel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseTwo">点击我进行展开，再次点击我进行折叠。第2部分</a></h4></div><divid="collapseTwo"class="panel-collapsecollapse"><divclass="panel-body">Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.</div></div></div><divclass="panelpanel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseThree">点击我进行展开，再次点击我进行折叠。第3部分</a></h4></div><divid="collapseThree"class="panel-collapsecollapse"><divclass="panel-body">Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.</div></div></div></div>尝试一下?结果如下所示：data-toggle="collapse"添加到您想要展开或折叠的组件的链接上。href或data-target属性添加到父组件，它的值是子组件的id。data-parent属性把折叠面板（accordion）的id添加到要展开或折叠的组件的链接上。创建不带accordion标记的简单的可折叠组件（collapsible），如下所示：实例<buttontype="button"class="btnbtn-primary"data-toggle="collapse"data-target="#demo">简单的可折叠组件</button><divid="demo"class="collapsein">Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.</div>尝试一下?结果如下所示：正如您在实例中看到的，我们创建了一个可折叠的组件，与折叠面板（accordion）不同，我们没有添加属性data-parent。用法下表列出了折叠（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"。通过JavaScript：可通过JavaScript激活collapse方法，如下所示：$('.collapse').collapse()选项有一些选项是通过data属性或JavaScript来传递的。下表列出了这些选项：选项名称类型/默认值Data属性名称描述parentselector默认值：falsedata-parent如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似-这依赖于accordion-group类。toggleboolean默认值：truedata-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')实例下面的实例演示了方法的用法：实例<divclass="panel-group"id="accordion"><divclass="panelpanel-default"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseOne">点击我进行展开，再次点击我进行折叠。第1部分--hide方法</a></h4></div><divid="collapseOne"class="panel-collapsecollapsein"><divclass="panel-body">Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.</div></div></div><divclass="panelpanel-success"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseTwo">点击我进行展开，再次点击我进行折叠。第2部分--show方法</a></h4></div><divid="collapseTwo"class="panel-collapsecollapse"><divclass="panel-body">Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.</div></div></div><divclass="panelpanel-info"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseThree">点击我进行展开，再次点击我进行折叠。第3部分--toggle方法</a></h4></div><divid="collapseThree"class="panel-collapsecollapse"><divclass="panel-body">Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.</div></div></div><divclass="panelpanel-warning"><divclass="panel-heading"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseFour">点