web-dev-qa-db-ja.com

Bootstrapを使用したアコーディオンテーブルの作成

多数の列（約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のドキュメントでは、折りたたみについて詳しく説明していません。

どんな援助も大歓迎です、ありがとう！

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
35
jready

これはすでに以前に尋ねられたようです：

これは役立つかもしれません：

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のフィドルです

49
josec89

真のアコーディオン効果を取得し、一度に1行しか展開できないようにする方法を探している人は、次のようにshow.bs.collapseのイベントハンドラーを追加できます。

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

ここで this を変更するように変更しました： http://jsfiddle.net/QLfMU/116/

33
hackel

受け入れられた回答では、展開可能な行が非表示になっている場合、表示されている行の間隔が面倒になります。これをcssに追加することで取り除くことができます：

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

「+」は 隣接する兄弟セレクター であるため、展開可能な行を次の行にしたい場合は、collapse-rowという名前のtrに続く次のtrを選択します。

更新されたフィドル： http://jsfiddle.net/Nb7wy/2372/

4
Boat