Materialize-css 可折叠

Materialize-css 可折叠是 Materialize-css 组件库中的一个组件，它可以将大量的内容折叠起来，只显示摘要部分，从而方便用户进行浏览。

安装

在 HTML 文件中引入 Materialize-css 的 CSS 和 JavaScript 文件，并按照 官方文档 社区介绍的方式配置可折叠组件即可。

使用

1. 在 HTML 中创建 collapsible 元素：

   <ul class="collapsible">
     <li>
       <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
       <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
     <li>
       <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
       <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
     <li>
       <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
       <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
   </ul>
   

2. 在 JavaScript 中初始化可折叠组件：

   document.addEventListener('DOMContentLoaded', function() {
     var collapsibles = document.querySelectorAll('.collapsible');
     M.Collapsible.init(collapsibles);
   });
   

配置

可折叠组件支持以下配置：

激活当前项

通过 data-collapsible 属性配置，指定哪些项是可折叠的（默认所有项都可以折叠），以及哪些项是默认展开的：

<ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

其中 data-collapsible="accordion" 表示当前只能展开一个项，即手风琴模式，如果想保持所有项展开，则设置 data-collapsible="expandable"。

回调函数

可折叠组件在展开或收起时会触发相应的回调函数，在初始化时通过 JavaScript 来配置：

document.addEventListener('DOMContentLoaded', function() {
  var collapsibles = document.querySelectorAll('.collapsible');
  var options = {
    onOpenStart: function() {
      console.log('Open Start');
    }
  };
  M.Collapsible.init(collapsibles, options);
});

其中 onOpenStart 表示展开动作开始时调用的函数，在本例中输出 "Open Start"。其它回调函数还有：

• onOpenEnd：展开动作结束时调用的函数；
• onCloseStart：收起动作开始时调用的函数；
• onCloseEnd：收起动作结束时调用的函数。