我有几个具体化选项卡，每个选项卡都有一个不同的可折叠可扩展列表(用作侧边栏(。
选项卡工作正常，展开项在第一个选项卡上正常工作;但是，展开控件在任何其他选项卡上都不起作用。它只是作为手风琴工作，并且不调用可折叠对象中的onOpenStart函数。
这是我所拥有的一个简化示例：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using cdn for testing purposes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#tab1">Tab 1</a></li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<!-- This Exandable works! -->
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<!-- This Expandable does not work (just accordion) -->
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>
<!-- cdn for testing purposes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
M.AutoInit();
document.addEventListener('DOMContentLoaded', function() {
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
});
document.addEventListener('DOMContentLoaded', function() {
let elem = document.querySelector('.collapsible.expandable');
let instance = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){console.log('collasible Open Start')}
});
});
</script>
</body>
</html>有人可以帮助指出我错过了什么吗？
谢谢！
您的错误在此行中：
let elem = document.querySelector('.collapsible.expandable');
您需要使用 querySelectorAll 来初始化两个可折叠元素。
代码段：
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
let elem = document.querySelectorAll('.collapsible.expandable');
let instanceCollapsible = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){
//console.log('collasible Open Start');
}
});
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#tab1">Tab 1</a></li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>