javascript - 物化:制作表行 Accordion 标题

Question

我正在尝试使用 materialize 创建一个表格，允许每个表格行都可以点击。单击一行应该在该行下方展开 Accordion ，其中包含该行的更多数据。我似乎无法打开 Accordion 或将整个 Accordion 设置为 Accordion 的标题。我已经尝试将类直接添加到 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>

Answer 1

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