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