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"
属性即可激活该插件。
若组件是动态生成的,则需要调用 mdui.mutation()
进行初始化。
Example
item1 content
item1 content
item1 content
subitem1 content
subitem1 content
subitem1 content
item2 content
item2 content
item2 content
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>
在 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
Home
-
dashboard
Dashboard
-
- Overview
- Language
- Location
- New vs Returning
-
- Overview
- All Traffic
- Direct Traffic
- Search Overview
-
- Overview
- All Pages
- Landing Pages
- Exit Pages
-
shopping_cart
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>