使用 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/