很抱歉问一个愚蠢的问题。但是我在JS的知识很差。我不知道如何使用JS初始化实现组件，但是使用jquery效果很好。例如，我想使用可折叠组件。
http://next.materializecss.com/collapsible.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
var elem = document.querySelector('.collapsible');
var instance = new M.Collapsible(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.collapsible').collapsible();
});
My code
最佳答案
尝试这个：
<!DOCTYPE>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>
</head>
<script>
var elem = document.querySelector('.collapsible');
var instance = new M.Collapsible(elem, {
// inDuration: 1000,
// outDuration: 1000
});
</script>
<body>
<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>
</body>
</html>
在此处检查工作代码笔：https://codepen.io/Astha25/pen/OzJpbQ