Javascript 用Bootstrap创建手风琴表

我有一个表，它是从一个有很多列（大约30列）的数据库中填充的。有人想到的一个解决方案是在表外创建一个手风琴，其中每一行都可以单击，并将向下与其他列的信息相一致。我很难让引导正确地为我做这件事

一些东西
再来点东西
还有更多
默认情况下隐藏

从中可以看到，此功能不起作用。我真的不确定出了什么问题，Bootstrap的文档也没有详细介绍崩溃

---

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

这似乎已经被问过了：

这可能有助于：

更新：

你的小提琴没有加载jQuery，所以一切正常

一些东西
再来点东西
还有更多
默认情况下隐藏

试试这个：

---

我还向详细信息行添加了

colspan='2'

。但本质上是你在处理jQuery加载（在左栏的框架中）

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

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

---

我在这里修改了这个示例：

在接受的答案中，当可扩展行被隐藏时，可见行之间的间距会令人讨厌。您可以通过将以下内容添加到css中来消除此问题：

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

“+”是，因此如果希望可展开行成为下一行，则会选择tr后面名为“折叠行”的下一个tr

---

这里是最新的提琴：

Heh这是我用来让我走到这一步的资源之一。它已经有一年多的历史了，对我不起作用，所以我想应该有一个新的线程。你的编辑仍然不起作用。看起来隐藏行在那里，但单击不会展开或折叠。它对我有用。。。这很奇怪：你点击可见的行（一些stuf…），但它没有显示隐藏的行吗？你们使用什么浏览器？是的，点击可见行。隐藏行就像是其中的一半（可能需要调整填充）。我在IE9上，不幸的是，这是目标浏览器。它也是Bootstrap3.x，所以我认为问题与IE9有关。你能在其他浏览器上试试吗，比如firefox的chrome浏览器，以确保这就是问题所在？如何在循环中做到这一点？我遇到了一个关于角度环的问题，我就是这样，不需要任何JS