如何在页面加载时启动引导折叠的目标作为折叠?

Question

我知道这个问题以前有人问过，但我已经阅读了 10 多篇帖子，但仍然无法弄清楚如何开始我的行折叠，以便当我单击它时它们会展开。

<table class="soloduoquadtable">
<tr>
<th colspan="2" class="soloduoquadtable" style="background-color:#aef54d; padding-left:9%;"><b>DUO</b><img src="2people.png" style="height:100%; width:12%;" align="right" /></th>
</tr>
<tr>
<td colspan="2" style="border-right:1px black solid; border-top:1px black solid; text-align:center; font-size:20px; background-color:lightgrey; padding-top:10px;"><b>Rank 250 <pre>Top 1%</pre></b></td>
</tr>
<tr>
<td colspan="2" class="soloduoquadtable">Win%<pre>10</pre></td>
</tr>
<tr>
<td class="soloduoquadtable" style="border-right:1px solid black; width:50%">KDA<pre>25252</pre></td>
<td class="soloduoquadtable">Top 10%<pre>15</pre></td>
</tr>
<tr id="demo" class="collaspe">
<td  colspan="2" class="soloduoquadtable">Hello</td>
</tr>

</table>
<input  type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="width:inherit;" value="MORE INSIGHTS" />

Answer 1

下面是使用引导程序折叠行的数据表的工作示例：

$(document).ready(function() {
if ($('.table').length > 0) {
$('.table .header').on("click", function() {
$(this).toggleClass("active", "").nextUntil('.header').css('display', function(i, v) {
return this.style.display === 'table-row' ? 'none' : 'table-row';
});
});
}
})

.table tr:not(.header) {
display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table table-bordered">
<tr class="header">
<td colspan="2">Header 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<td colspan="2">Header 2</td>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<td colspan="2">Header 3</td>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<td colspan="2">Header 4</td>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>