【发布时间】：2018-08-03 00:14:52
【问题描述】：
您好，我正在尝试合并 Accordion/Collapse 的示例，如本例所示：
Bootstrap 4 change caret on clicking dropdown（接受的答案）
使用 Bootstrap 表，其中一行可单击以折叠/展开其余部分。
[data-toggle="collapse"]:after {
display: inline-block;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f054";
transform: rotate(90deg) ;
transition: all linear 0.25s;
}
[data-toggle="collapse"].collapsed:after {
transform: rotate(0deg) ;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordion" role="tablist">
<table class="table">
<tbody>
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<tr role="tab" id="headingOne">
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</a>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</tbody>
</table>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>如您所见，它不起作用，向上箭头是可点击的，但它位于一行上方，并且该行根本不可点击。请指教。
编辑：
我采用了您的代码并将其修改为仅限表格的解决方案（无卡）。我遇到的问题是我这样做的方式是折叠的 div 出现在所有标题的表格下方（而不是紧挨在相应标题下方）。我将如何重新排列下面的内容，以便 #collapseOne 直接出现在表格的第一行之后，而不是表格的下方。
<div id="accordion">
<table class="table b-dark table-sm p-2 mb-0">
<tbody>
<tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
<td class="border-bottom b-green text-center text-white">First</td>
<td class="text-center border-right border-bottom text-white">Description</td>
<td class="border-bottom text-center text-white">Time</td>
<td class="border-bottom text-white text-right">
<i class="fa"></i>
</td>
</tr>
<tr id="headingTwo" data-toggle="collapse" data-target="#collapseTwo">
<td class="border-bottom b-green text-center text-white">Second</td>
<td class="text-center border-right border-bottom text-white">Desc</td>
<td class="border-bottom text-center text-white">Time</td>
<td class="border-bottom text-white text-right">
<i class="fa"></i>
</td>
</tr>
</tbody>
</table>
<div id="collapseOne" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="text-white">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
<div id="collapseTwo" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="text-white">
Another anotherprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
【问题讨论】：
标签： bootstrap-4 accordion