我想使用Bootstrap手风琴展开和折叠表格行。
当前,如果我单击任何行,它都会展开和折叠。但是我想要的是,如果我单击第二行,那么如果将其展开则第一行应该折叠,依此类推。
<div class=" panel-body">
<table class="table">
@foreach (var item in Model)
{
<tr>
<td class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(item.Id)">
<button class="bb" type="button">
@Html.Raw(item.H)
</button>
</td>
<td>
@Html.Raw(item.E)
</td>
</tr>
<tr>
<td id="AA_@(item.Id)" class="accordion-body collapse">
<table>
<tr>
<td>
@Html.Raw(item.D)
</td>
<td>
@Html.Raw(item.B)
</td>
</tr>
</table>
</td>
</tr>
}
</table>
</div>
我研究了SO的问题,并在here上找到了@tmg提供的一种解决方案。非常感谢@tmg。我在我的场景中也遵循同样的方法,并且对我有用。
<div class="panel-body">
<table class="table">
@foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(item.Id)">
<td>
<button class="bb" type="button">
@Html.Raw(item.H)
</button>
</td>
<td>
@Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" id="AA_@(item.Id)">
<table>
<tr>
<td>
@Html.Raw(item.D)
</td>
<td>
@Html.Raw(item.B)
</td>
</tr>
</table>
</div>
</td>
</tr>
}
</table>
</div>
并添加了JQuery以折叠和切换表行
$('.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
为hiddenRow
添加样式
.hiddenRow {
padding: 0 !important;
}