section: javascript
id: collapse
description: 为元素提供折叠和展开功能
icon: icon-collapse
filter: zhedie zd
---
# 折叠
折叠插件使用直观的动画来展示或显示内容。
## 结构
要实现折叠，一般需要两个元素：
- 折叠内容元素，包含使用动画来切换显示或隐藏的内容，需要添加 `.collapse` 类，如果被折叠内容在一开始就是显示的，还需要为其添加 `.in` 类；
- 触发元素，需要添加 `[data-toggle="collapse"]` 属性，并且使用 `[href]` 或 `[data-target="#selector"]` 属性来自定用于折叠内容元素。
### 示例
直接使用 href 属性
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
```html
直接使用 href 属性
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
```
## 折叠分组
多个折叠如果放置在同一个父级容器元素内，可以创建一个折叠分组（手风琴效果），只需要为每个触发元素添加 `[data-parent="#selector"]` 属性，其属性值指向父级容器即可。
折叠 1
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
折叠 2
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
折叠 3
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
```html
折叠 1
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
折叠 2
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
折叠 3
被折叠元素内容。
多个触发元素可以指向同一个折叠内容。
```
### 结合面板组使用
```html
```
## 使用方法
### 手动初始化
通常情况下，直接使用 `[data-*]` 属性就可以使折叠正常工作，但也提供了手动使用 JavaScript 代码进行初始化方式。
- `$().collapse()`
- `$().collapse(options)`
其中 `options` 参数为可以选的，用于指定初始化的选项，可用选项如下：
| 选项 |
类型 |
默认值 |
描述 |
| `parent` |
selector | `false` |
`false` |
可用设定一个选择器字符串，用于指定折叠分组的父级元素。 |
| `toggle` |
'true' | `false` |
`true` |
是否在初始化时显示折叠内容。 |
```js
$('#myCollapseContent').collapse({
toggle: false
});
```
### 方法
#### `$().collapse('show')`
显示折叠内容。
#### `$().collapse('hide')`
隐藏折叠内容。
#### `$().collapse('toggle')`
切换显示折叠内容。
#### 调用方法
```js
// 显示折叠内容
$('#myCollapseContent').collapse('show')
```
### 事件
当折叠内容显示或隐藏时会在折叠内容元素上触发以下事件：
| 事件 |
描述 |
| `show.zui.collapse` |
当折叠内容显示时触发。 |
| `shown.zui.collapse` |
当折叠内容显示后触发，此时动画已执行完毕。 |
| `hide.zui.collapse` |
当折叠内容隐藏时触发。 |
| `hidden.zui.collapse` |
当折叠内容隐藏后触发，此时动画已执行完毕。 |
```js
$('#myCollapseContent').on('hidden.zui.collapse', function () {
console.log('折叠内容已隐藏。');
})
```