Collapse 折叠内容块插件

Collapse 插件用于折叠或展开内容块。

该插件本身不带任何样式，你需要自行编写样式、或者与其他组件配合使用。

调用方式

• 通过自定义属性调用
  
• 通过 JavaScript 调用
  

HTML 结构

这是一个最基础的 HTML 结构：

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

添加类 .mdui-collapse-item-open 可以使内容块处于默认展开状态：

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

含类 .mdui-collapse-item-arrow 的元素会在内容块展开时翻转 180 度：

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

调用方式

通过自定义属性调用

使用该方式无需编写 JavaScript 代码。只需在 <div class="mdui-collapse"></div> 元素上添加 mdui-collapse="options" 属性即可激活该插件。

在线运行

通过 JavaScript 调用

实例化插件：

// selector 为元素的 CSS 选择器或 DOM 元素
// options 为插件的参数，见下面的参数列表
var inst = new mdui.Collapse(selector, options);

在线运行

参数

方法

事件