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

Question

该应用程序有 3 行，每行 2 个表 [在代码片段中只有一行]，我正在尝试创建以下事件：标题被点击该行中的另一个表被隐藏带有单击标题的表格会扩展以填充 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>                                              <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 的情况下完成，但我很懒:)