需要 transition.js 支持。
.collapse 隐藏条目, .collapse.in 显示条目。
调用方式一：仅仅通过向页面元素添加 data-toggle="collapse" 和
data-target 就可以为其赋予控制可折叠页面元素的能力。 data-target
属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加 .collapse 。
如果你希望可折叠页面元素的默认状态是展开的，请添加 .in 。 为了给一组可折叠页面元素添加控制器，添加
data-parent="#selector" 即可
调用方式二：手动触发 $(".collapse").collapse()
| 方法 | 例子 | 描述 |
|---|---|---|
| .collapse(options) | $('#myCollapse').collapse({ toggle: false
}) |
赋予页面元素可折叠功能。接受一个可选的object作为参数。 |
| .collapse('toggle') | $('#myCollapse').collapse('toggle') |
展示或隐藏一个可折叠的页面元素。 |
| .collapse('show') | $('#myCollapse').collapse('show') |
展示一个可折叠页面元素。 |
| .collapse('hide') | $('#myCollapse').collapse('hide') |
隐藏一个可折叠页面元素。 |
| 事件 | 使用 | 描述 |
|---|---|---|
| show.zui.collapse | $('#myCollapse').on('show.zui.collapse',
function () { // do something… }) |
当 show 方法被调用时，此事件将被立即触发。 |
| shown.zui.collapse | $('#myCollapse').on('shown.zui.collapse',
function () { // do something… }) |
当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。 |
| hide.zui.collapse | $('#myCollapse').on('hide.zui.collapse',
function () { // do something… }) |
当 hide 方法被调用时，此事件将被立即触发。 |
| hidden.zui.collapse | $('#myCollapse').on('hidden.zui.collapse',
function () { // do something… }) |
当可折叠页面元素隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。 |