折叠面板(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选择器可以显示和隐藏多个元素,如下图,当点击左上角的蓝色按钮,会出现将隐藏的图片显示出来,点击第二、三个按钮可以进行小窗口图片的隐藏与显示的切换。点击蓝色按钮下的蓝色字体,会出现手风琴折叠效果,把所折叠的内容显示出来,再次点击,又会进行隐藏,折叠可自由进行切换。
在这里插入图片描述


版权声明:本文为weixin_44543412原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。