如何让 Materialise 可扩展以在选项卡内工作？

Question

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

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

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

谢谢！

Answer 1

你的错误在这一行：

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

您需要使用 querySelectorAll 来初始化两个 collapsible 元素。

片段：

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>

如何让 Materialise 可扩展以在选项卡内工作？

How to get a Materialize expandable to work within a tab?

javascript

css

tabs

expandable

materialize