可折叠元素是点击后展开的手风琴元素。它们允许您隐藏与用户无关的内容。

• filter_drama第一
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• place第二
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• whatshot第三
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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

初始化

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

  // Or with jQuery

  $(document).ready(function(){
    $('.collapsible').collapsible();
  });
        

预选部分

如果您想要一个带有预打开部分的可折叠元素，只需将 active 类添加到可折叠标题即可。

• filter_drama第一
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• place第二
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• whatshot第三
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  <li class="active">
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
  </li>
        

选项

您可以使用这些选项自定义每个可折叠项的行为。例如，您可以在打开或关闭可折叠项时调用自定义函数来运行。该函数传递打开或关闭的 li 元素作为参数。

名称	类型	默认值	描述
手风琴	布尔值	true	如果手风琴与可折叠项相对。
onOpenStart	函数	null	在可折叠项打开之前调用的回调函数。
onOpenEnd	函数	null	在可折叠项打开之后调用的回调函数。
onCloseStart	函数	null	在可折叠项关闭之前调用的回调函数。
onCloseEnd	函数	null	在可折叠项关闭之后调用的回调函数。
inDuration	数字	300	以毫秒为单位的过渡持续时间。
outDuration	数字	300	以毫秒为单位的过渡退出持续时间。

方法

您可以通过这些方法以编程方式打开和关闭可折叠项。第二个参数是要打开的可折叠项的从 0 开始的索引。

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以这样获取插件实例

  var instance = M.Collapsible.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.collapsible').collapsible('methodName');
    $('.collapsible').collapsible('methodName', paramName);
  */
        

.open();

打开可折叠部分。

参数

整数：要打开的第 N 个部分。

instance.open(3);
      

.close();

关闭可折叠部分。

参数

整数：要关闭的第 N 个部分。

instance.close(3);
      

.destroy();

销毁插件实例并拆除

instance.destroy();
      

可折叠类型

可折叠项有两种行为方式。它可以允许多个部分保持打开状态，或者它只能允许一个部分一次保持打开状态，这称为手风琴。请参阅以下内容以了解每种类型的演示。