使用 Bootstrap 创建手风琴表

Question

我有一个从数据库中填充的表，该数据库有很多列（大约 30 列）。有人想到的一个解决方案是在表格中创建一个手风琴，其中每一行都是可点击的，并且将与其余列的信息一起向下折叠。我无法让 Bootstrap 为我正确执行此操作。

<table class="table table-hover">
    <thead>
        <th></th><th></th><th></th>
    </thead>

    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Some Stuff</td>
            <td>Some more stuff</td>
            <td>And some more</td>
        </tr>
        <tr>
            <td>
                <div id="accordion" class="collapse">Hidden by default</div>
            </td>
        </tr>
    </tbody>
</table>

正如您从jsfiddle 中看到的，此功能不起作用。我不太确定出了什么问题，而且 Bootstrap 的文档也没有详细介绍折叠问题。

任何帮助将不胜感激，谢谢！

Answer 1

这似乎之前已经问过：

这可能会有所帮助：

Twitter Bootstrap Use collapse.js on table cells [Almost Done]

更新：

你的小提琴没有加载 jQuery，所以一切正常。

<table class="table table-hover">
<thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</thead>

<tbody>
    <tr data-toggle="collapse" data-target="#accordion" class="clickable">
        <td>Some Stuff</td>
        <td>Some more stuff</td>
        <td>And some more</td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="accordion" class="collapse">Hidden by default</div>
        </td>
    </tr>
</tbody>
</table>

试试这个： http://jsfiddle.net/Nb7wy/2/

我还在详细信息行中添加了colspan='2'。但它本质上是你加载 jQuery 的问题（在左栏中的框架中）

Answer 2

对于任何来这里寻找如何获得真正的手风琴效果并且一次只允许展开一行的人，您可以为 show.bs.collapse 添加一个事件处理程序，如下所示：

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

我在这里修改了this 示例：http://jsfiddle.net/QLfMU/116/

Answer 3

在接受的答案中，当可扩展行被隐藏时，可见行之间的间距令人讨厌。您可以通过将其添加到 css 来摆脱它：

.collapse-row.collapsed + tr {
     display: none;
}

'+' 是adjacent sibling selector，因此如果您希望可展开的行成为下一行，则选择名为 collapse-row 的 tr 之后的下一个 tr。

这里是更新的小提琴：http://jsfiddle.net/Nb7wy/2372/