Bootstrap/jquery单击以显示表中的多个隐藏行

我尝试了几种不同的解决方案[在stack exchange上找到]，但似乎无法让我的示例正常工作

如何设置此表，以便单击“clickable”（可点击）TR后显示所有隐藏行

这是[condensed]表，注意它是bootstrap3'hover'类型：

<table class="table table-condensed table-hover dashboard">

    <thead>
        <tr><th></th><th></th></tr>
    </thead>

    <tbody>
        <tr class='clickable' id="68" >
            <td>visible row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="68collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>

        <tr class='clickable' id="69" >
            <td>visible row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="collapse out budgets" id="69collapsed">
            <td>hidden row</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

单击“可点击”行，仅显示第一个[或可能是最后一个]隐藏的TR

$(".clickable").click(function() {
    $(this).nextUntil('.clickable').show();
});

---

您在多行上使用相同的

id

。将68折叠、69折叠指定为类而不是id

以下是JSFIDLE：

基本上，

id

用于唯一标识元素。因此，您当前的JavaScript只拾取id为的第一个元素并对其进行更改

有关的更改如下：

<tr class="collapse out budgets 68collapsed">

---

而不是

#

来指示它是一个类而不是一个id。

使用

数据切换class='collapse'

和

数据目标。另外，在子行上使用class而不是id



可见行
隐藏行
隐藏行
可见行
隐藏行
隐藏行
你的[链接]没有链接到任何东西。@Blazemonger，他想在点击的那一行之后显示所有行，如果我在你编辑后点击第一行，它不会显示所有行？我想他不是字面上的“所有行”。我可能错了。完美，简单，我喜欢：）奇怪的是，当这些行立即“显示”出来时，在再次单击隐藏它们之后，它们直到大约第二次暂停后才会关闭。有什么想法吗？是的。这是因为Bootstrap在“崩溃”类上的转换动画。您可以通过缩短效果时间来加快速度：
.collasing{-webkit transition:height.01s ease；transition:height.01s ease}
我更新了演示：@Zim我可以问一下您为什么拒绝建议的编辑吗？我没有看到功能上的区别，只是这个链接可能在某个时候再次中断。@JanWichelmann代码段中的引用似乎不正确。我再次更新并添加了一个SO代码片段。
<tr class="collapse out budgets 68collapsed">

var target = '.'+id+'collapsed';