MDUI Collapse 折叠内容块插件
开始使用
获取 MDUI 兼容性 规范 JavaScript 工具库
样式
颜色与主题 字体 网格布局 排版 图标 媒体 辅助类 阴影
组件
涟漪动画效果 按钮 浮动操作按钮 分隔线 可扩展面板 文本框 选择控件 滑块 列表 列表控制 网格列表 Tab 选项卡 工具栏 应用栏 抽屉式导航 底部导航栏 卡片 纸片 工具提示 Snackbar 表格 对话框 菜单 进度指示器
JavaScript 插件
Collapse Headroom
资源
Material 图标

Collapse 折叠内容块插件

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

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

调用方式

  1. 通过自定义属性调用
  2. 通过 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" 属性即可激活该插件。

Example

item1

item1 content

item1 content

item1 content

subitem1

subitem1 content

subitem1 content

subitem1 content

item2

item2 content

item2 content

item2 content

item3

item3 content

item3 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>

通过 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">&#xe88a;</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">&#xe871;</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">&#xe7fb;</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe313;</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">&#xe335;</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe313;</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">&#xe913;</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">&#xe313;</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">&#xe8cc;</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>
Previous
进度指示器
Next
Headroom
设置文档主题

主题色

主色

强调色