MaterializeCSS 默认打开所有 Collapsible

Question

希望在页面加载时打开所有可折叠的，然后仍然允许它们可折叠等。这可能吗？

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

Answer 1

这可以通过 instance.open() 来完成。

不要在该方法中传递任何数字，所有的可折叠物都会打开。

HTML-

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

JS-

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

Collapsible - MaterializeCSS

Answer 2

致所有来到这里的人。（我刚刚发现这个老 post 试图自己解决这个问题）。

实际上@Cătălin Rădoi 的评论是正确的：

document.addEventListener('DOMContentLoaded', function() {

    // Get all collapsibles
    var elems = document.querySelectorAll('.collapsible');
    // Initialise them
    var instances = M.Collapsible.init(elems);
    // Get the specific collapsible - in this case the first(0)
    var instance = instances[0];
    // Pass the index of the panel you need to open  
    instance.open(0);

});

已测试并正常工作 codepen。

https://materializecss.com/collapsible.html

Answer 3

最近遇到了类似的情况，总结一下解决问题的方法。

1.仅 Javascript

document.addEventListener('DOMContentLoaded', function() {

    // Initialization as presented in the docs
    var elems = document.querySelectorAll('.collapsible')
    var instances = M.Collapsible.init(elems, {})

    // Loop through all instances and open them
    for (var i = 0; i < instances.length; i++) {
        instances[i].open()
    }
})

2。用classactive。如果可扩展类型没问题，您可以使用它，然后只需将 class="active" 添加到每个 <li>。像那样:

Javascript

document.addEventListener('DOMContentLoaded', function() {
    // Initialization as presented in the docs
    var elem = document.querySelector('.collapsible.expandable');
    var instance = M.Collapsible.init(elem, {
        accordion: false
    })
})

HTML

  <!-- Add expandable to ul -->
  <ul class="collapsible expandable">
    <!-- Add active to every li -->
    <li class="active">
      <div class="collapsible-header">First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li class="active">
      <div class="collapsible-header">Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li class="active">
      <div class="collapsible-header">Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

MaterializeCSS 默认打开所有 Collapsible

MaterializeCSS Open All Collapsible's by Default

materialize