материализовать: сделать заголовок аккордеона строки таблицы

Я пытаюсь использовать materialize для создания таблицы, которая позволяет кликать по каждой строке таблицы. Щелчок по строке должен развернуть аккордеон под строкой, которая содержит больше данных для строки. Никак не могу заставить аккордеон открыться или установить целиком как шапку для аккордеона. Я попытался добавить классы прямо в tr, а также обернуть каждый tr в div. ни одно из решений не дало правильного поведения. Вот код, который у меня сейчас есть:

    <script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

  <script type="text/javascript"> 
    $('.collapsible').collapsible({
       accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
     });
   </script>
<table class="bordered">
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>

  <tbody>
    <tr class="collapsible" data-collapsible="accordion">
        <td class="collapsible-header">Alvin</td>
        <div class="collapsible-body">
          <p>
            hello
          </p>
        </div>
        <td>Eclair</td>
        <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Jonathan</td>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>

javascript html jquery css materialize
person TDmoneybanks    schedule 06.07.2016    source источник
comment
Попробуйте переместить тег script после HTML, прямо перед закрывающим </body>. Или оберните его в функцию jQuery, которая ждет загрузки страницы. например $(function() { }).   -  person Malk    schedule 06.07.2016
comment
все та же проблема   -  person TDmoneybanks    schedule 06.07.2016
comment
Вы видели мой ответ? Это сработало?   -  person Waldir J. Pereira Junior    schedule 28.07.2016
comment
Привет. Вы видели мой ответ? Это сработало?   -  person Waldir J. Pereira Junior    schedule 14.08.2016

Ответы (1)


arrow_upward
2
arrow_downward

Materialize Collapsible необходимо настроить для элемента li.

Попробуй это:

<table class="bordered">
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
        <td class="collapsible" data-collapsible="accordion">
          <li>
            <div class="collapsible-header">Alvin</div>
            <div class="collapsible-body">
              <p>
                hello
              </p>
            </div>
          </li>
        </td>

        <td>Eclair</td>
        <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Jonathan</td>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>

Макет не так хорош, но работает так, как вы ожидаете. Если вы используете Materialize только для collapsible, я предлагаю вам использовать другой компонент, например Bootstrap Collapse.

person Waldir J. Pereira Junior    schedule 06.07.2016