使用 Bootstrap 创建手风琴表

Posted 2023-02-22

【中文标题】使用 Bootstrap 创建手风琴表

【英文标题】：Creating Accordion Table with Bootstrap

【发布时间】：2014-07-31 16:00:26

【问题描述】：

我有一个从数据库中填充的表，该数据库有很多列（大约 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 的文档也没有详细介绍折叠问题。

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

【参考方案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 的问题（在左栏中的框架中）

【讨论】：

嘿，这是我用来让我走到这一步的资源之一。它已经有一年多了，对我没有用，所以我想应该有一个新线程。

您的编辑仍然无效。看起来隐藏行在那里，但点击不会展开或折叠。

它对我有用......这很奇怪：S 你点击可见行（一些东西......）并且它没有显示隐藏的行吗？你用什么浏览器？

是的，点击可见行。隐藏行就像那里的一半（可能需要调整填充）。我在 IE9 上，不幸的是那是目标浏览器。它也是 Bootstrap 3.x。

所以我认为问题与IE9有关。您可以尝试使用其他一些浏览器，例如 chrome of firefox，以确保这是问题所在？

【参考方案2】：

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

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

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

【讨论】：

你可以在没有js的情况下做到这一点，通过将data-target添加到所有.collapse元素，例如<div id="demo2" class="collapse" data-target=".table">Demo2</div>

【参考方案3】：

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

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

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

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

【讨论】：

如何在循环中做到这一点？我遇到了角度循环问题

我喜欢这个，不需要任何JS