我必须使用Bootstrap 3表格,其中表格行是可点击的,就像手风琴一样。
只能"打开"一行。单击折叠的行将:
- 打开单击的折叠行
- 关闭另一行(如果有)
- 将图标从"加号"切换到"减号"
- 将其他"减号"图标切换为"加号"(如果有)
我已经走到了这一步:
.HTML:
<div class="container">
<table class="table table-bordered" id="overview-table">
<div id="body-1">
<tr data-toggle="collapse" data-target="#text-1" class="accordion-toggle collapsed">
<td scope="row" class="accordion-label">
<span class="glyphicon glyphicon-plus-sign"></span>
<h3>Heading 1</h3>
</td>
<td class="checkmark-table"></td>
<td class="checkmark-table"></td>
<td class="checkmark-table"></td>
</tr>
<tr>
<td colspan="4" class="hiddenRow">
<div class="accordian-body collapse clearfix" id="text-1">
<div class="collapse-feature-list">
<ul>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
<div class="collapse-link">
<a href="#">Link #3</a>
<a href="#">Link #2</a>
<a href="#">Link #1</a>
</div>
</div>
</td>
</tr>
</div>
<div id="body-2">
<tr data-toggle="collapse" data-target="#text-2" class="accordion-toggle collapsed" aria-expanded="false">
<td scope="row" class="accordion-label">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<h3>Heading 1</h3>
</td>
<td class="checkmark-table"></td>
<td class="checkmark-table"></td>
<td class="checkmark-table"></td>
</tr>
<tr>
<td colspan="4" class="hiddenRow">
<div class="accordian-body collapse clearfix" id="text-2">
<div class="collapse-feature-list">
<ul>
<li>Lorem</li>
<li>Loremr</li>
</ul>
</div>
<div class="collapse-link">
<a href="#">Link #3</a>
<a href="#">Link #2</a>
<a href="#">Link #1</a>
</div>
</div>
</td>
</tr>
</div>
</table>
</div>
JQUERY:
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
$('.collapse').on('shown.bs.collapse', function() {
$(".glyphicon").addClass('glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
});
$('.collapse').on('hidden.bs.collapse', function() {
$(".glyphicon").addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
});
吉斯菲德尔
如何选择特定行以获得上述功能?
更新/解决方案
我在这里找到了一个仅限CSS的解决方案 https://stackoverflow.com/a/18568997/1437245
因为我的 .accordion-切换是一个<tr>
:before就像另一个表格单元格并破坏布局。所以我不得不使用 .accordion-toggle td:first-child:before
和.accordion-toggle.collapsed td:first-child:before
选择第一个单元格并将伪选择器放在该单元格之前。
工作 JSFIDDLE https://jsfiddle.net/DTcHh/6591/
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
$('.collapsed').on('click', function() {
$(".glyphicon").addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
if( $(this).find(".glyphicon").hasClass('glyphicon-plus-sign')) {
$(this).find(".glyphicon").addClass('glyphicon-minus-sign').removeClass('glyphiconplus-sign');
JSFIDDLE: https://jsfiddle.net/DTcHh/6594/