Bootstrap崩溃表
我试图让几行崩溃，当我点击父行。目前，我只能折叠单行，但我需要能够同时关闭+2行。Bootstrap崩溃表
下面是我目前的代码，在这段代码中，当我单击第一行时，我无法弄清楚如何折叠“HIDDEN”和“HIDDEN 2”行。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.hiddenRow {
padding: 0 !important;
}
</style>
<div id="accordion" role="tablist" aria-multiselectable="true">
<table class="table">
<tr id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<td>
test
</td>
</tr>
<tr>
<td class="hiddenRow">
<div id="collapseOne" class="collapse in" aria-labelledby="headingOne">HIDDEN</div>
</td>
</tr>
<tr>
<td class="hiddenRow">
<div id="collapseTwo" class="collapse in" aria-labelledby="headingTwo">HIDDEN 2</div>
</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
而不是id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"使用此示例。 https://jsfiddle.net/ayang10/DTcHh/33622/
<tr data-toggle="collapse" data-target=".order1">
<td>+</td>
<td>1001</td>
<td>9/29/2016</td>
<td>$126.27</td>
</tr>
<tr class="collapse order1">
<td>1</td>
<td></td>
<td>Shirt</td>
<td>$12.27</td>
</tr>
<tr class="collapse order1">
<td>1</td>
<td></td>
<td>Shoes</td>
<td>$62.27</td>
</tr>
脚本抛开你可以改变HTML以'
JS小提琴的工作原理我需要我的工作，但是，当我把它移动到一个HTML文件，它只显示第一个隐藏的元素，我很不确定为什么它无法找到第二个隐藏元素 –
当我使用您在评论中添加的html时，发生了同样的情况 –
因为它似乎引导使用href调用合拢函数，它是不可能在同一时间崩溃比行更多。这是因为href只能保存一个链接，在这种情况下，它是成功折叠的行的id。我尝试了一些黑客行为，例如使用内联onclick="location.href = '#collapseOne #collapseTwo'"即时给予href两个链接，但这并不起作用。还尝试从使用href作为collapser切换到data-target，这应该与data-toggle一起使用来定义多个目标，但也不成功。这看起来像它是引导一个开放的问题：
https://github.com/twbs/bootstrap/issues/19813
这意味着，最好的办法是要么使用一些CSS魔法即#main:active {.collapse {display:none}}（仅适用于像less或sass预处理器）或写一些jQuery的轻松达到效果。
$(document).ready(function() {
$("#main").on("click", function(){
$("#collapseOne, #collapseTwo").hide();
});
});
此实现只隐藏目标的ID，类似的.toggle()代替.hide()将是双向的。
另一种方法是将表格嵌入成功折叠的行内，这应该折叠行内的整个表格。但是这只是一个喷射球，我还没有测试过。
这里有一些重复寻求解决同样的问题！
Expand/collapse multiple table rows with a more elegant solution
哪里是你的JS？ – Rafael
你是什么意思？这仅仅是一个HTML页面，无论从jQuery和引导 –