twitter-bootstrap Bootstrap 折叠表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44506183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Collapsing Table
提问by Graeham Broda
I am trying to make several rows collapse when I click on the parent row. currently, i am only able to collapse a single row, but i need to be able to close +2 rows at the same time.
当我点击父行时，我试图让几行折叠起来。目前，我只能折叠一行，但我需要能够同时关闭 +2 行。
Below is my current code, in this code I cannot figure out how to collapse both the "HIDDEN" and "HIDDEN 2" rows when I click on the first row.
下面是我当前的代码，在此代码中，当我单击第一行时，我无法弄清楚如何折叠“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>
回答by Monkey_Dev1400
Instead of id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"use this example. https://jsfiddle.net/ayang10/DTcHh/33622/
而不是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>6.27</td>
</tr>
<tr class="collapse order1">
<td>1</td>
<td></td>
<td>Shirt</td>
<td>.27</td>
</tr>
<tr class="collapse order1">
<td>1</td>
<td></td>
<td>Shoes</td>
<td>.27</td>
</tr>
回答by marcx
Because it seems that bootstrap is using the hrefto call the collapse function, it isn't possible to collapse more than row at a time. This is because the href can only hold one link, which in this case is the id for the row that is successfully collapsing. I tried a few hacks, such as using an inline onclick="location.href = '#collapseOne #collapseTwo'"to give the href two links on the fly, but this didn't work. Also tried to switch from using the href as the collapser to data-target, which should work with data-toggleto define multiple targets, but also unsuccessfully. This looks like it's an open issue for bootstrap:
因为似乎 bootstrap 正在使用href来调用折叠函数，所以一次折叠多于行是不可能的。这是因为 href 只能保存一个链接，在这种情况下，它是成功折叠的行的 id。我尝试了一些技巧，例如使用内联onclick="location.href = '#collapseOne #collapseTwo'"为 href 动态提供两个链接，但这不起作用。还尝试从使用 href 作为折叠器切换到data-target，这应该可以data-toggle用于定义多个目标，但也没有成功。这看起来像是引导程序的一个悬而未决的问题：
https://github.com/twbs/bootstrap/issues/19813
https://github.com/twbs/bootstrap/issues/19813
This means that the best way is to either use some CSS magic i.e. #main:active {.collapse {display:none}}(only works with a preprocessor like lessor sass) or to write some jquery to easily achieve the effect.
这意味着最好的方法是要么使用一些 CSS 魔法 ie #main:active {.collapse {display:none}}（仅适用于像lessor 之类的预处理器sass），要么编写一些 jquery 来轻松实现效果。
$(document).ready(function() {
$("#main").on("click", function(){
$("#collapseOne, #collapseTwo").hide();
});
});
This implementation only hides the targeted id's, something like .toggle()instead of .hide()would be bidirectional.
此实现仅隐藏目标 id，类似于.toggle()而不是.hide()双向的。
Another method would be to nest a table inside of the row that is successfully collapsing, which should collapse the entire table inside of the row. But this is just a spitball and I haven't tested.
另一种方法是在成功折叠的行内嵌套一个表，这应该将整个表折叠在行内。但这只是一个spitball，我还没有测试过。
Here are some duplicates seeking to solve the same problem!
这里有一些重复的试图解决同样的问题！
Expand/collapse multiple table rows with a more elegant solution
