# 基础用法

# 效果

# 配置

通过data-collapse-name可以设置折叠面板的名字

<div class="collapse">
  <div data-collapse-name="折叠面板1">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板2">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板3">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板4">
    折叠内容
  </div>
</div>
new Collapse({
  element: document.querySelector(".collapse")
});

# 默认展开项

# 效果

# 配置

如果要设置默认展开的折叠面板,需要先给每一项绑定data-collapse-key,然后设置data-collapse-active的值为特定项的data-tab-key

  • data-collapse-key 的值可以是任意字符串,但不能重复

  • 如果不设置 data-collapse-active,则不展开任何面板

<div class="collapse" data-collapse-active="2">
  <div data-collapse-name="折叠面板1" data-collapse-key="1">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板2" data-collapse-key="2">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板3" data-collapse-key="3">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板4" data-collapse-key="4">
    折叠内容
  </div>
</div>
new Collapse({
  element: document.querySelector(".collapse")
});

# 手风琴模式

# 效果

# 配置

是否开启手风琴模式,开启后每次至多展开一个面板,此模式默认关闭

new Collapse({
  element: document.querySelector(".collapse"),
  accordion: true
});

# 参数

Collapse组件构造函数的参数是一个对象,该对象接收三个属性作为配置:

  • element:当前需要绑定的 Collapse 元素,必填
  • callback:切换面板时触发的回调函数,返回当前面板元素、当前面板的data-collapse-key和所有已展开的面板的data-collapse-key,选填
  • accordion:是否开启手风琴模式,默认为false,选填
new Collapse({
  element: document.querySelector('.collapse'),
  accordion: false,
  callback: ($item, key, keys) => {
    console.log($item, key, keys)
  }
})

# API

  • data-collapse-name:面板的名字,必填
  • data-collapse-key:如果需要设置 data-collapse-active,则必填
  • data-collapse-active:需要展开面板的 data-collapse-key,选填