使用方法

需要 transition.js 支持。

.collapse 隐藏条目, .collapse.in 显示条目。

调用方式一:仅仅通过向页面元素添加 data-toggle="collapse"data-target 就可以为其赋予控制可折叠页面元素的能力。 data-target 属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加 .collapse 。 如果你希望可折叠页面元素的默认状态是展开的,请添加 .in 。 为了给一组可折叠页面元素添加控制器,添加 data-parent="#selector" 即可

调用方式二:手动触发 $(".collapse").collapse()

结合面板使用

The content of Item1. .panel-collapse .collapse .fade

The content of Item2. .panel-collapse .collapse .in 默认显示。

The content of item3. .panel-collapse .collapse

结合按钮使用

Ho la la hu la la, hu la hu la.

方法和事件

方法 例子 描述
.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过渡效果也已执行完毕),此事件被触发。