Question

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

Answer 1

对于任何其他来这里的人。（我只是发现了这篇旧文章，试图自己解决这个问题。）

实际上@CătălinRă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 2

这可以通过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

MaterializeCSS默认情况下打开所有可折叠的

2 个答案: