该应用程序有3行,每行2个表[在代码段中只有一行],我正在尝试创建以下事件:
这可能吗?
我尝试过使用Bootstrap展开和折叠,但这并不能真正实现我想要的代码。
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header bg-dark text-white">
Post Change
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header bg-dark text-white">
New Members
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25,50,100,250,500]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
我希望单击的表格可以扩展,以填充其他隐藏表格在隐藏后会占据的空间。
最佳答案
为此,请将click事件处理程序添加到每个表的标题中。在这些处理程序中,您可以隐藏不想显示的div,但是还需要更新显示的div,以使其使用剩余空间。这可以通过添加col-12类并删除col-6类来完成(在同一事件中)。
我不确定您是否在使用任何库,但是使用jQuery时,它将看起来像这样:
$('#table1headerid').click(function(){
$('#div2id').hide();
$('#div1id').removeClass('col-6').addClass('col-12');
});
$('#table2headerid').click(function(){
$('#div1id').hide();
$('#div2id').removeClass('col-6').addClass('col-12');
});
这当然可以不用jQuery,但是我很懒:)