Как получить возможность расширения Materialise для работы на вкладке? - PullRequest
Новая
       53

Как получить возможность расширения Materialise для работы на вкладке?

0 голосов
/ 31 мая 2018

У меня есть несколько материализованных вкладок, где каждая вкладка будет иметь разные складные расширяемые списки (используемые в качестве боковой панели).

Вкладки работают правильно, а расширяемая работает правильно на первой вкладке;однако расширяемый не работает ни на одной другой вкладке.Он просто работает как гармошка и не вызывает функцию 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 Ответ

0 голосов
/ 01 июня 2018

Ваша ошибка в этой строке: 

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>
...