折叠面板（Collapse）

折叠面板（Collapse）

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年5 月28 日

折叠面板(Collapse)

折叠面板知识点的整理：Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容，控制内容的可见性。它是一个灵活的插件，使用少量的类（来自必需的过渡插件），以方便切换行为。

点击下面任何一个按钮，通过类更改显示和隐藏另一个class包含的元素：

.collapse 隐藏内容
.collapsing 带动态效果的切换
.collapse.show 显示内容

你可以使用带href 属性的连接,、或者带 data-target 属性的按钮来创建折叠效果-这两种情况下 data-toggle=“collapse” 属性都是必须的。

多目标控制

可以在< button >或者< a >标签上，通过 JQuery选择器来显示和隐藏多个元素（或者多个< button >、 < a >元素来控制显示/隐藏一个元素素）），如果被引用对象的href 或者 data-target 属性定义正确。多目标控制引用的代码截图如下所示：

除了多目标控制，结合card卡片组件使用，可以扩展折叠组件为手风琴效果。可以使用自定义样式创建手风琴效果，只要添加 data-children 属性，并指定一组相邻元素来切换(如.item)，然后使用与上述相同的属性和class，来切换/隐藏其关联的内容。

用法：

折叠插件使用一些Class类来处理复杂的事务：

.collapse 隐藏内容

.collapse.show 显示内容

.collapsing 在转换开始时被添加，当它完成时则移除。

为一个折叠块控件添加类似手风琴组的效果，还需要添加data数据属性data-parent="#selector"。将 data-toggle=“collapse” 和 data-target 添加到元素中，可自动指定折叠面板的控制项，其中 data-target 属性接受CSS选择器，以应用折叠。确保向可折叠面板添加collapse添加到可折叠面板组件之上。

也可以利用JavaScript人为开启折叠面板。可通过data属性或JavaScript传递选项，但data属性要把选项名追加到data-后面。

方法：

.collapse(options)

启用你的可折叠对象，通过 object方法。

.collapse(‘toggle’)

即发生 shown.bs.collapse 或 hidden.bs.collapse 事件前)返回给调用者。

collapse(‘show’)

显示可折叠元素， 在可折叠元素实际显示之前 (即shown.bs.collapse 事件发生之前)返回给调用者。

.collapse(‘hide’)

隐藏可折叠元素， 在可折叠元素实际上被隐藏之前 (即hidden.bs.collapse 事件发生之前)返回给调用者。

.collapse(‘dispose’)

销毁一个元素的折叠。

事件属性：

show.bs.collapse 当调用show 方法时，会立即触发事件

shown.bs.collapse
用户可见折叠面板中的块时，会触发此事件（需要等CSS加载过渡完成）。

hide.bs.collapse 当调用hide 方法时，立即触发该事件。

hidden.bs.collapse
当折叠面板中的块对于用户完全隐藏时（需要等CSS加载过渡完成），会触发该事件）。

多目标控制通过JavaScript选择器可以显示和隐藏多个元素，如下图，当点击左上角的蓝色按钮，会出现将隐藏的图片显示出来，点击第二、三个按钮可以进行小窗口图片的隐藏与显示的切换。点击蓝色按钮下的蓝色字体，会出现手风琴折叠效果，把所折叠的内容显示出来，再次点击，又会进行隐藏，折叠可自由进行切换。