twitter-bootstrap 在 html 表中正确创建引导手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31362883/
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
Correctly create bootstrap accordion in html table
提问by NoobTemplar
I found several questions similar to what I was trying to accomplish and actually took one of the examples and tried to adapt to do what I want to achieve to no avail.
我发现了几个与我试图完成的问题类似的问题，实际上采取了其中一个例子，并试图适应做我想要实现的目标，但无济于事。
I want to be able to create a bootstrap accordion inside of a regular html table but I just can't seem to get it right. If I click on the first cell, it expands the accordion's div, but then when I click on the second cell, that cell too shows. How can I make it properly obey the accordion style in that clicking a single cell will only collapse/expand a single section at a time.
我希望能够在常规的 html 表中创建一个引导手风琴，但我似乎无法做到正确。如果我单击第一个单元格，它会扩展手风琴的 div，但是当我单击第二个单元格时，该单元格也会显示。我怎样才能让它正确地遵守手风琴风格，因为单击一个单元格一次只会折叠/展开一个部分。
I'm okay with multiple rows being expanded, and I feel like there is something obvious I'm missing or doing wrong. I have been at this for a few hours and the answer is still eluding me. Can anyone tell me what I'm doing wrong?
我可以扩展多行，但我觉得我遗漏了一些明显的东西或做错了。我已经在这个问题上呆了几个小时，但我仍然没有得到答案。谁能告诉我我做错了什么？
<body>
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description</th>
<th>Credit</th>
<th>Debit</th>
<th>Balance</th>
</tr>
</thead>
<tbody id ="accordion" class="accordion-group">
<tr>
<td data-toggle="collapse" data-target="#demo1" class="accordion-toggle" data-parent="#accordion">1</td>
<td data-toggle="collapse" data-target="#demo22" class="accordion-toggle" data-parent="#accordion">05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">0.00</td>
<td class="text-error"></td>
<td class="text-success">0.00</td>
</tr>
<tr >
<td colspan="6" class="hiddenRow">
<div class=" accordian-body collapse" id="demo1"> Demo1 </div>
<div class="accordian-body collapse" id="demo22"> Demo22 </div>
</td>
</tr>
</tbody>
<tbody>
<tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
<td>2</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">.00</td>
<td class="text-error"></td>
<td class="text-success">1.00</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
</tr>
<tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
<td>3</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">0.00</td>
<td class="text-error"></td>
<td class="text-success">1.00</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow"><div id="demo3" class="accordian-body collapse">Demo3</div></td>
</tr>
</tbody>
</table>
</body>http://jsfiddle.net/2Dj7Y/2082/
http://jsfiddle.net/2Dj7Y/2082/
I'm able to create a similar table structure using all divs and bootstrap columns which is not hard, but I want a pure html table structure. I was going to try to use this in an angular directive and combine it with other code I have that runs on tables.
我能够使用所有 div 和引导列创建类似的表结构，这并不难，但我想要一个纯 html 表结构。我打算尝试在 angular 指令中使用它，并将它与我在表上运行的其他代码结合起来。
回答by vanburen
See if this helps: I believe this is what you're trying to do and if so it's just your data targets are off slightly.
看看这是否有帮助：我相信这就是您想要做的，如果是这样，只是您的数据目标略有偏离。
$('.accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})tbody tr.info td:hover {
background-color: #266080;
color: #fff;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3>Collapsing Tables</h3>
</div>
<div class="panel-body">
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>EMail</th>
<th>Phone</th>
<th>ID #</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td data-toggle="collapse" data-target="#table1" class="accordion-toggle">One</td>
<td data-toggle="collapse" data-target="#table2" class="accordion-toggle">Two</td>
<td data-toggle="collapse" data-target="#table3" class="accordion-toggle">Three</td>
<td data-toggle="collapse" data-target="#table4" class="accordion-toggle">Four</td>
<td data-toggle="collapse" data-target="#table5" class="accordion-toggle">Five</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<table class="table table-striped">
<thead>
<tr class="accordian-body collapse" id="table1">
<td><a href="#">Link</a>
</td>
<td>Sub-A</td>
<td>Sub-B</td>
</tr>
<tr class="accordian-body collapse" id="table2">
<th>One-A</th>
<th>Two-A</th>
<th>Three-A</th>
<th>Four-A</th>
<th>Five-A</th>
<th>Six-A</th>
</tr>
</thead>
<tbody>
<tr class="accordian-body collapse" id="table3">
<td>One-B</td>
<td>Two-B</td>
<td>Three-B</td>
<td>Four-B</td>
<td>Five-B</td>
<td>Six-B</td>
</tr>
<tr class="accordian-body collapse" id="table4">
<td>One-C</td>
<td>Two-C</td>
<td>Three-C</td>
<td>Four-C</td>
<td>Five-C</td>
<td>Six-C</td>
</tr>
<tr class="accordian-body collapse" id="table5">
<td>One-D</td>
<td>Two-D</td>
<td>Three-D</td>
<td>Four-D</td>
<td>Five-D</td>
<td>Six-D</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>