Collapse 折叠内容块插件 - MDUI 开发文档, Material Design 前端框架

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" 属性即可激活该插件。

Example

item1 content

subitem1 content

item2 content

item3 content

<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"><p><a href="javascript:;">item1</a></p></div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- 嵌套元素 -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header"><p><a href="javascript:;">subitem1</a></p></div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"><p><a href="javascript:;">item2</a></p></div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"><p><a href="javascript:;">item3</a></p></div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

在 Collapse 内的元素上可以添加一些属性来绑定事件，这些属性在使用 JavaScript 调用方式时也可以使用。

属性	说明
`mdui-collapse-item-close`	点击该元素会触发 `close.mdui.collapse` 事件，并关闭该元素所处的面板。

通过 JavaScript 调用

实例化插件：

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

demo

参数

参数名	类型	默认值	描述
`accordion`	`boolean`	`false`	是否启用手风琴效果。为 `true` 时，最多只能有一个内容块处于打开状态，打开一个内容块时会关闭其他内容块。为 `false` 时，可同时打开多个内容块。

方法

方法名	描述
`open(item)`	打开内容块。 `item`：内容块的索引号、或者 DOM 元素、或者 CSS 选择器。
`close(item)`	关闭内容块。 `item`：内容块的索引号、或者 DOM 元素、或者 CSS 选择器。
`toggle(item)`	切换内容块状态。 `item`：内容块的索引号、或者 DOM 元素、或者 CSS 选择器。
`openAll()`	打开所有内容块。该方法仅在 `accordion` 为 `false` 时有效。
`closeAll()`	关闭所有内容块。

事件

事件	描述	目标	参数
`open.mdui.collapse`	内容块开始打开动画时，事件将被触发。	`<div class="mdui-collapse-item"></div>`	`event.detail.inst`：实例
`opened.mdui.collapse`	内容块结束打开动画时，事件将被触发。
`close.mdui.collapse`	内容块开始关闭动画时，事件将被触发。
`closed.mdui.collapse`	内容块结束关闭动画时，事件将被触发。

更多示例

子列表

Example

Home
Dashboard
Audience
- Overview
- Language
- Location
- New vs Returning
Acquisition
- Overview
- All Traffic
- Direct Traffic
- Search Overview
Behavior
- Overview
- All Pages
- Landing Pages
- Exit Pages
Ecommerce

<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>