如何让Materialize可扩展以在选项卡中工作？
如何让Materialize可扩展以在选项卡中工作？
提问于 2018-06-01 00:50:46
我有几个materialize标签，每个标签都有一个不同的可折叠可展开列表(用作侧边栏)。
选项卡工作正常，可展开项在第一个选项卡上工作正常；但是，可展开项在任何其他选项卡上都不起作用。它只是作为一个折叠面板工作，并且不在可折叠的中调用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>
有人能帮我指出我错过了什么吗？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-02 03:25:00
您的错误在此行中：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50629220
复制相关文章
相似问题