如何让Materialize可展开组件在Tab标签页中正常工作？

我一眼就看出问题所在啦——你只初始化了第一个折叠组件！

• 你用document.querySelector('.collapsible.expandable')只会选中页面中第一个匹配该类名的元素，也就是Tab1里的折叠列表。Tab2里的折叠组件完全没被初始化，所以只能运行Materialize默认的手风琴模式，自定义的onOpenStart回调自然也不会触发。
• 另外你重复监听了DOMContentLoaded事件，虽然不报错，但可以合并成一个，让代码更整洁。

我们只需要调整初始化逻辑，确保所有折叠组件都被正确配置：

1. 用querySelectorAll替换querySelector，获取所有.collapsible.expandable元素
2. 遍历这些元素，逐个初始化Collapsible实例，传入accordion: false和自定义回调
3. 合并重复的DOMContentLoaded监听，避免冗余代码

<!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 Expandable 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 will work now! -->
<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>
document.addEventListener('DOMContentLoaded', function() {
  // 初始化Tabs组件
  const tabsEl = document.querySelector('.tabs');
  M.Tabs.init(tabsEl, {});

  // 获取所有折叠组件并逐个初始化
  const collapsibleElems = document.querySelectorAll('.collapsible.expandable');
  collapsibleElems.forEach(elem => {
    M.Collapsible.init(elem, {
      accordion: false,
      onOpenStart: function(){console.log('collapsible Open Start')}
    });
  });
});
</script>
</body>
</html>

如果你想保留M.AutoInit()，也可以尝试在HTML元素上用data-属性配置基础参数，比如给折叠列表加data-accordion="false"，不过自定义回调还是需要手动绑定初始化哦。

内容的提问来源于stack exchange，提问作者Robert Todar