divに2つの要素が並んでいますが、一方を非表示にすると、もう一方が拡張されて、それらが含まれているdivのスペースが埋められますか？

debugcn 投稿 Dev

イウォリアン

アプリにはそれぞれ2つのテーブルが3行あり[コードスニペットには1行しかありません]、次のようなイベントを作成しようとしています。

ヘッダーがクリックされます
行の他のテーブルが非表示になります
クリックされたヘッダーのあるテーブルが展開され、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>

クリックしたテーブルが拡大して、他の非表示のテーブルが非表示になったときに占めるスペースを埋めることを期待しています。

ジョン・マルティネス

これを実現するには、各テーブルのヘッダーにクリックイベントハンドラーを追加します。これらのハンドラーでは、表示したくない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なしで実行できますが、私は怠け者です:)

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-11

コメントを追加

サインイン

Related 関連記事

記事