Javascript 引导表内部的可折叠div

我试图在我的引导表中添加一个可折叠的div。在标题为“COLLAPSE HERE”的标题之后，我尝试在我的第一列中执行此操作。我已将向下图标包装在一个

锚定

标记中，尝试将图标作为可折叠的切换。然后，我在希望在切换时显示/隐藏的表行周围嵌套了一个

包装。目前，这对我的表没有影响。我使用的是bootstraps方法，但如果可以在javascript中实现这一点，那就很好了

以下是我的代码片段：

弗斯特
第二
第三
四
标题
在这里倒塌
网上商店
1.
2.
3.
4.
零售业
1.
2.
3.
4.
约会
1.
2.
3.
4.
命令

这里有一个普通的JavaScript选项，可以为折叠添加一些动画

我抓取您希望折叠的div，抓取类，抓取雪佛龙。 我使用

querySelector（）

，因为代码中每个类只有一个，这个选择器方法将返回该类的第一次迭代。然后我添加一个事件监听器

单击

并添加一个条件，以检查目标元素

.col是否将不透明度设置为
0。如果设置为
0
，我们将转换设置为
all.5s ease in out，在不透明度上设置半秒ease in out。我们将
Y溢出设置为hidden，然后通过在
事件上使用
.remove（）
和
.add（）删除向上和向下，来切换V形。target=V形

else我们还添加了一个转换动画，并再次使用
.add（）和
.remove（）反转
类


let col=document.querySelector（'.col'）；
设fas=document.querySelector（'.fas'）；
设digit3=document.getElementById（'digit3'）；
常数可折叠=（e）=>{
fas.classList.toggle（'fa-chevron-down'）；
如果（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.2 ease in out'；
col.style.transition='-o-transition:all.2 ease-in-out'；
col.style.overflowY='hidden'；
e、 target.classList.remove（'fa-chevron-down'）；
e、 target.classList.add（'fa-chevron-up'）；
}否则{
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.2 ease in out'；
col.style.transition='-o-transition:all.2 ease-in-out'；
col.style.maxHeight='0px'；
e、 target.classList.remove（'fa-chevron-up'）；
e、 target.classList.add（'fa-chevron-down'）；
}
}
fas.addEventListener（'click'，可折叠）
.fas{
左边距：3倍；
}

弗斯特
第二
第三
四
标题
在这里倒塌
网上商店
1.
2.
3.
4.
零售业
1.
2.
3.
4.
约会
1.
2.
3.
4.
命令