用Bootstrap创建Accordion表
我有一个从数据库填充的表，该数据库有很多列(大约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的文档也没有深入到崩溃的细节。
任何帮助都将不胜感激，谢谢！
回答 3
Stack Overflow用户
发布于 2014-06-11 03:00:10
这似乎已经被问过了：
这可能会有所帮助：
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 (在左列的框架中)。
Stack Overflow用户
发布于 2014-10-28 02:29:17
对于任何来这里寻找如何获得真正的折叠效果并且一次只允许展开一行的人来说，您可以为show.bs.collapse添加一个事件处理程序，如下所示：
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});我在这里修改了this示例：http://jsfiddle.net/QLfMU/116/
Stack Overflow用户
发布于 2017-11-28 17:01:03
在可接受的答案中，当可扩展行被隐藏时，可见行之间会出现令人讨厌的间距。您可以通过将此代码添加到css中来摆脱这种情况：
.collapse-row.collapsed + tr {
display: none;
}'+‘是折叠的，所以如果你想让你的可展开行成为下一行，这会选择下一个tr，紧跟在tr后面的tr名为adjacent sibling selector - row。
这里是最新的fiddle：http://jsfiddle.net/Nb7wy/2372/
https://stackoverflow.com/questions/24148631
复制相似问题
腾讯云开发者
