Question

我有几个物化标签，每个标签都有不同的可折叠展开式列表（用作侧边栏）。

标签正常工作，并且可扩展功能在第一个标签上正常工作;但是，expandable不适用于任何其他选项卡。它只是作为手风琴使用，并不会在可折叠的内部调用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来启动可折叠元素。

摘录：

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>

如何使Materialize可扩展以在选项卡中工作？

1 个答案: