使用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在表格单元格上使用collapse.js [几乎完成]

更新:

你的小提琴没有加载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');
});

我在这里修改了这个例子:http://jsfiddle.net/QLfMU/116/

Answer 3

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

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

'+' 是相邻的同级选择器，因此如果您希望可扩展行成为下一行，这将选择名为 collapse-row 的 tr 之后的下一个 tr。

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