我在一个 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>

                                              <thead>

                                                    <tr>

                                                     [TABLE GOES HERE]

                                                    </tr>

                                            </table>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

我期待点击的表格扩展以填充其他隐藏表格在隐藏时占用的空间。

Answer 1

为此，请向每个表的标题添加一个单击事件处理程序。在这些处理程序中，您可以隐藏不想显示的 div，但您还需要更新显示的 div 以使其使用剩余空间。这可以通过添加 col-12 类并删除 col-6 类（也在同一事件期间）来完成。我不确定您是否在使用任何库，但使用 jQuery 时它看起来像这样：$('#table1headerid').click(function(){&nbsp; &nbsp; $('#div2id').hide();&nbsp; &nbsp; $('#div1id').removeClass('col-6').addClass('col-12');});$('#table2headerid').click(function(){&nbsp; &nbsp; $('#div1id').hide();&nbsp; &nbsp; $('#div2id').removeClass('col-6').addClass('col-12');});这当然可以在没有 jQuery 的情况下完成，但我很懒:)