折叠面板

最新推荐文章于 2022-06-23 10:44:05 发布

额么么

最新推荐文章于 2022-06-23 10:44:05 发布

阅读量739

点赞数

CC 4.0 BY-SA版权

分类专栏：专题技术文献

本文链接：https://blog.youkuaiyun.com/weixin_44541165/article/details/92639664

专题技术文献专栏收录该内容

33 篇文章

订阅专栏

本文介绍了Bootstrap中的折叠面板（Collapse）功能，用于创建整洁、交互式的页面布局。通过使用不同的class，如`collapse`, `collapsing`, `collapse.show`，可以控制内容的显示与隐藏。折叠面板可以通过链接或带有`data-toggle="collapse"`属性的按钮实现，同时可以通过`data-target`指定要操作的元素。文章还提到了手风琴效果的实现，以及如何使用`data-parent`属性。此外，文章详细阐述了与折叠面板相关的JavaScript方法和事件，如`toggle`, `show`, `hide`, `dispose`，以及对应的事件触发，如`hidden.bs.collapse`和`shown.bs.collapse`。" 130874013,18148785,Python datetime模块计算日期差,"['Python', '开发语言']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：visual Studio jquery
作者：邓伟征
撰写时间：2019年6月12日

(Collapse)折叠面板可以使我们的页面更加整洁和漂亮，他也是Bottstrap中的一个插件
通过类更改显示和隐藏另一个class包含的元素
Collapse：隐藏内容，collapsing 带动态效果的切换 collapse.show 显示内容
也可以使用带href 属性的连接,、或者带 data-target 属性的按钮来创建折叠效果-这两种情况下 data-toggle=“collapse” 属性都是必须的。

一一三二二三

附件

在这里插入图片描述

如图点击一三三打开折叠面板，显示内容，点击二二三关闭折叠面板
利用data数据属性
将 data-toggle=“collapse” 和 data-target 添加到元素中，可自动指定折叠面板的控制项，其中 data-target 属性接受CSS选择器，以应用折叠。确保向可折叠面板添加collapse添加到可折叠面板组件之上。如果你希望它默认是打开的，可定义额外的 show属性。
为了给一个折叠块控件添加类似手风琴组的效果，还需要添加data属性data-parent="#selector"。
Parent：如果提供了一个选择器，然后当某个折叠块打开时，这个指定的父元素下面所有别的折叠块元素都将自动关闭（类似于传统的手风琴样式 - 这依赖card样式），属性必须在目标可折叠区域上定义。（默认值：false）
Toggle：在调用中折叠块元素。
方法：collapse(options)
启用你的可折叠对象，通过 object方法。$(’#myCollapsible’).collapse({
toggle: false
})
collapse(‘toggle’)
即发生 shown.bs.collapse 或 hidden.bs.collapse 事件前)返回给调用者。
.collapse(‘show’)
显示可折叠元素，在可折叠元素实际显示之前 (即shown.bs.collapse 事件发生之前)返回给调用者。
collapse(‘hide’)
隐藏可折叠元素，在可折叠元素实际上被隐藏之前 (即hidden.bs.collapse 事件发生之前)返回给调用者。
.collapse(‘dispose’)
销毁一个元素的折叠。
事件：Bootstrap提供为折叠面板提供了一系列事件属性。
$(’#myCollapsible’).on(‘hidden.bs.collapse’, function () {
})；
show.bs.collapse：当调用show 方法时，会立即触发事件。
shown.bs.collapse: 用户可见折叠面板中的块时，会触发此事件（需要等CSS加载过渡完成）。
hide.bs.collapse: 当调用hide 方法时，立即触发该事件。
hidden.bs.collapse: 当折叠面板中的块对于用户完全隐藏时（需要等CSS加载过渡完成），会触发该事件）