实现：制作表格行手风琴标题答案

【问题标题】：materialize: make table row accordion header实现：制作表格行手风琴标题
【发布时间】：2016-07-07 01:54:57
【问题描述】：

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

【问题讨论】：

尝试将您的脚本标签移动到 HTML 之后，就在结束 </body> 之前。或者将其包装在等待页面加载的 jQuery 函数中。例如$(function() { }).
没有同样的问题
你看到我的回答了吗？成功了吗？
嗨。你看到我的回答了吗？成功了吗？

标签： javascript jquery html css materialize

【解决方案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

【讨论】：