引导表内的可折叠 div

Question

我正在尝试在我的引导表中添加一个可折叠的div。我正在尝试在标题为"COLLAPSE HERE的标题后的第一列中执行此操作" 我已经将向下图标包装在一个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>

我的预期结果是将所有内容放在"在此处折叠"标题和图标下的第一行下以折叠表格。

Answer 1

这是一个普通的JavaScript选项，它为折叠添加了一些动画。

我抓住你想折叠的div，以及人字形的类。 我使用querySelector()，因为您的代码中每个类中只有一个，并且此选择器方法将返回该类的第一次迭代。然后，我添加一个eventListenerclick并添加一个条件来检查目标元素，.col是否将不透明度设置为0。如果设置为0我们将过渡设置为all .5s ease-in-out，在不透明度上缓入半秒。我们将Y overflow设置为隐藏，然后通过删除向上和向下添加来切换 V 形，在event.target=>V 形上使用.remove()和.add()。

否则 ，我们还添加一个过渡动画并使用.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>