Bootstrap：单击 header 时折叠整个正文

Question

我有一个table这样的

我想达到的目的是点击"click here to Collapse"时，后面的3行会折叠起来，只渲染thead。然后，再次单击它，完整的 table 将再次显示。

我试过这样的代码，但它根本不起作用。如何解决？谢谢！

<main class="container" role="main">
    <table class="table">
        <thead>
            <tr>
                <th class="bg-primary text-center font-weight-bold text-white" scope="col" colspan="7">
                     <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">click here to Collapse</a>
                </th>
            </tr>
        </thead>
        <div class="collapse" id="collapseExample">
            <tbody>
                <tr>
                    <td class="tdOdd">Mark</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                </tr>
                <tr>
                    <td class="tdOdd">Mark</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                </tr>
                <tr>
                    <td class="tdOdd">Mark</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                    <td class="tdEven">Otto</td>
                    <td class="tdOdd">@mdo</td>
                </tr>
            </tbody>
        </div>
    </table>
</main>

Answer 1

如果我将代码更改为以下内容，它会以某种方式起作用。但是动画效果看起来很别扭总的来说，我去掉了div，直接把折叠放到tbody.

<main class="container" role="main">
    <table class="table">
        <thead>
            <tr>
                <th class="bg-primary text-center font-weight-bold text-white" scope="col" colspan="7">
                     <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">click here to Collapse</a>
                </th>
            </tr>
        </thead>
        <tbody class="collapse" id="collapseExample">
            <tr>
                <td class="tdOdd">Mark</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
            </tr>
            <tr>
                <td class="tdOdd">Mark</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
            </tr>
            <tr>
                <td class="tdOdd">Mark</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
                <td class="tdEven">Otto</td>
                <td class="tdOdd">@mdo</td>
            </tr>
        </tbody>
    </table>
</main>

Bootstrap：单击 header 时折叠整个正文

Bootstrap: collpase the entire tbody when clicking the header

html-table

collapse

twitter-bootstrap