Collapse 折疊內(nèi)容塊插件

Collapse 插件用于折疊或展開內(nèi)容塊。

該插件本身不帶任何樣式，你需要自行編寫樣式、或者與其他組件配合使用。

調(diào)用方式

• 通過自定義屬性調(diào)用
  
• 通過 JavaScript 調(diào)用
  

HTML 結(jié)構(gòu)

這是一個(gè)最基礎(chǔ)的 HTML 結(jié)構(gòu)：

<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 可以使內(nèi)容塊處于默認(rèn)展開狀態(tài)：

<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 的元素會(huì)在內(nèi)容塊展開時(shí)翻轉(zhuǎn) 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>

調(diào)用方式

通過自定義屬性調(diào)用

使用該方式無需編寫 JavaScript 代碼。只需在 <div class="mdui-collapse"></div> 元素上添加 mdui-collapse="options" 屬性即可激活該插件。

在線運(yùn)行

通過 JavaScript 調(diào)用

實(shí)例化插件：

// selector 為元素的 CSS 選擇器或 DOM 元素
// options 為插件的參數(shù)，見下面的參數(shù)列表
var inst = new mdui.Collapse(selector, options);

在線運(yùn)行

參數(shù)

方法

事件