javascript - 我在一个 div 中有 2 个并排的元素，隐藏一个会使另一个扩展以填充它们所在的 div 的空间吗？

Question

该应用程序有 3 行，每行 2 个表 [在代码片段中只有一行]，我正在尝试创建事件:

1. 标题被点击
2. 该行中的另一个表变为隐藏
3. 带有单击标题的表格展开以填充 div 空间

这可能吗？

我尝试过使用 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>

我希望被点击的表格展开以填充另一个隐藏表格在隐藏时占据的空间。

Answer 1

要完成此操作，请将点击事件处理程序添加到每个表的表头。在这些处理程序中，您可以隐藏不想显示的 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 的情况下完成，但我很懒:)