如何让 Materialize 可扩展以在选项卡中工作？答案

【问题标题】：How to get a Materialize expandable to work within a tab?如何让 Materialize 可扩展以在选项卡中工作？
【发布时间】：2018-05-31 16:50:46
【问题描述】：

我有几个具体化选项卡，每个选项卡都有不同的可折叠可展开列表（用作侧边栏）。

选项卡正常工作，展开式在第一个选项卡上正常工作；但是，展开式在任何其他选项卡上都不起作用。它只是像手风琴一样工作，不会调用可折叠文件中的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>

有人可以帮忙指出我遗漏了什么吗？

谢谢！

【问题讨论】：

标签： javascript css tabs materialize expandable

【解决方案1】：

你的错误在这一行：

let elem = document.querySelector('.collapsible.expandable');

您需要使用querySelectorAll 来初始化两个可折叠元素。

sn-p：

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>

【讨论】：