引導表內的可折疊 div

Question

我正在嘗試在我的引導表中添加一個可折疊的 div。 我試圖在標題為"COLLAPSE HERE ”的 header 之后的第一列中執行此操作，我將向下圖標包裝在一個anchor標記中，試圖讓該圖標成為可折疊的切換開關。 然后我嵌套了一個<div></div>環繞我想在切換時顯示/隱藏的表格行。 目前，這對我的桌子沒有影響。 我正在使用可折疊的引導方法，但如果這可以在javascript中實現，那效果很好。

這是我的代碼的代碼片段：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover"> <colgroup> <col span="1" style="width: 116px;"> <col span="1" style="width: 116px;"> <col span="1" style="width: 116px;"> <col span="1" style="width: 116px;"> </colgroup> <thead> <tr> <th scope="col">First</th> <th scope="col">Second</th> <th scope="col">Third</th> <th scope="col">Four</th> <th scope="col">TITLE</th> </tr> </thead> <tbody class="text-18"> <tr> <th scope="row" id="3digit">COLLAPSE HERE <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i class="fas fa-chevron-down"></i> </a></th> <th scope="row"></th> <th scope="row"></th> <th scope="row"></th> <th>Online Stores</th> </tr> </tbody> <tbody> <div class="collapse" id="collapseExample"> <tr> <th scope="row">1</th> <th scope="row">2</th> <th scope="row">3</th> <th scope="row">4</th> <th>Retail</th> </tr> <tr> <th scope="row">1</th> <th scope="row">2</th> <th scope="row">3 </th> <th scope="row">4</th> <th>Appointment</th> </tr> <tr> <th scope="row">1</th> <th scope="row">2</th> <th scope="row">3</th> <th scope="row">4</th> <th>Orders</th> </tr> </div> </tbody> </table>

我的預期結果是將所有內容放在“COLLAPSE HERE”標題和圖標下的第一行下以折疊表格。

Answer 1

這是一個普通的 JavaScript 選項，它將一些 animation 添加到崩潰中。

我抓住了你想要折疊的div和chevron的class 。 我使用querySelector() ，因為您的代碼中只有一個類，並且此選擇器方法將返回該 class 的第一次迭代。 然后我添加一個eventListener click並添加一個條件來檢查目標元素.col是否將opacity設置為0 。 如果它設置為0 ，我們將過渡設置為all.5s ease-in-out ，半秒緩入不透明度。 我們將Y overflow設置為隱藏，然后通過在event.target => chevron上使用.remove()和.add()移除向上並添加向下來切換V形。

否則我們還添加一個過渡 animation並使用.add()和.remove()再次反轉fas類。

 let col = document.querySelector('.col'); let fas = document.querySelector('.fas'); let digit3 = document.getElementById('digit3'); const collapsable = (e) => { fas.classList.toggle('fa-chevron-down'); if (col.style.opacity === '0') { col.style.opacity = '1'; digit3.children[0].innerText = 'COLLAPSE HERE'; col.style.transition = 'all.5s ease-in-out'; col.style.transition = '-webkit-transition: all.2s ease-in-out'; col.style.transition = '-moz-transition: all.2s ease-in-out'; col.style.transition = '-ms-transition: all.2s ease-in-out'; col.style.transition = '-o-transition: all.2s ease-in-out'; col.style.overflowY = 'hidden'; e.target.classList.remove('fa-chevron-down'); e.target.classList.add('fa-chevron-up'); } else { col.style.opacity = '0'; digit3.children[0].innerText = 'EXPAND HERE'; col.style.transition = 'all.5s ease-in-out'; col.style.transition = '-webkit-transition: all.2s ease-in-out'; col.style.transition = '-moz-transition: all.2s ease-in-out'; col.style.transition = '-ms-transition: all.2s ease-in-out'; col.style.transition = '-o-transition: all.2s ease-in-out'; col.style.maxHeight = '0px'; e.target.classList.remove('fa-chevron-up'); e.target.classList.add('fa-chevron-down'); } } fas.addEventListener('click', collapsable);

 .fas { margin-left: 3px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-hover"> <colgroup> <col span="1" style="width: 116px;"> <col span="1" style="width: 116px;"> <col span="1" style="width: 116px;"> <col span="1" style="width: 116px;"> </colgroup> <thead> <tr> <th scope="col">First</th> <th scope="col">Second</th> <th scope="col">Third</th> <th scope="col">Four</th> <th scope="col">TITLE</th> </tr> </thead> <tbody class="text-18"> <tr> <th scope="row" id="digit3"><span>COLLAPSE HERE</span><a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-controls="collapseExample"><i class="fas fa-chevron-up"></i> </a></th> <th scope="row"></th> <th scope="row"></th> <th scope="row"></th> <th>Online Stores</th> </tr> </tbody> <tbody class="col"> <div id="collapseExample"> <tr> <th scope="row">1</th> <th scope="row">2</th> <th scope="row">3</th> <th scope="row">4</th> <th>Retail</th> </tr> <tr> <th scope="row">1</th> <th scope="row">2</th> <th scope="row">3 </th> <th scope="row">4</th> <th>Appointment</th> </tr> <tr> <th scope="row">1</th> <th scope="row">2</th> <th scope="row">3</th> <th scope="row">4</th> <th>Orders</th> </tr> </div> </tbody> </table>