该应用程序有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>
                                </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类并删除co​​l-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,但是我很懒:)

    07-22 10:31
    查看更多