Javascript 可折叠面板，适用于窗标

我正在尝试在我的网站上实现一个响应迅速的可折叠面板。我看到学校在这个问题上有一个例子，但它是有缺陷的。如果在按下按钮展开/折叠后调整窗口大小，面板将无法正确缩放

编辑：此处的屏幕截图：

他们的例子是：

可折叠的代码

//按钮可折叠
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

受影响面板的CSS代码

.aboutCollapsible{
字体：16px/24px“Roboto”；
背景：#202020；
文本对齐：对齐；
边缘底部：20px；
宽度：580px；
最大宽度：100%；
填充：1px20px 5px20px；
最大高度：0；
溢出：隐藏；
过渡：最大高度为0.5s；
}

我的问题： 当面板平滑滚动打开并允许面板完全响应窗口比例时，如何保持“动画”。我不希望使用bootstrap或HTML、CSS和JavaScript以外的任何东西

我的尝试： 我尝试将值从像素修改为百分比。但是，这不允许动画完全工作。

只需添加一种样式即可

.active+.content {
    max-height: 150px;
    overflow-y: auto;
}

根据您的要求更改最大高度。

只需添加样式即可

.active+.content {
    max-height: 150px;
    overflow-y: auto;
}

---

根据您的要求更改最大高度。

编辑：这不是一个完美的解决方案，因为它会使正在折叠的动画太慢（看起来好像动画被延迟了），但仍然：

将

else

语句中的代码更新为

content.style.maxHeight=“1000px”。一个足够大的高度，你认为你的内容永远不会达到

旧版：

在代码中，更改此选项

else {
    content.style.maxHeight = content.scrollHeight + "px";
}

到

这对我来说很有效。
编辑：这不是一个完美的解决方案，因为它会使折叠的动画太慢（看起来好像动画被延迟了），但仍然：

将
else
语句中的代码更新为
content.style.maxHeight=“1000px”。一个足够大的高度，你认为你的内容永远不会达到

旧版：

在代码中，更改此选项

else {
    content.style.maxHeight = content.scrollHeight + "px";
}

到

这对我很有用。
你能添加一个带有你提到的缺陷的可折叠屏幕快照吗？我找不到与示例有关的任何问题。@Ms.Tamil不幸的是，我的声誉太低，无法添加任何屏幕快照。重新创建的方法是打开链接，按任意按钮展开面板。拖动其中一个滑块使窗口变小，并注意到当窗口无法重新缩放以适应所有文本时文本是如何消失的。您可以捕获窗口的onresize事件，并在处理程序中再次执行for循环。@Ms.Tamil这听起来像是一个可行的解决方案，但是，将其缩放到100%会更容易。在保留“动画”的同时，有没有办法做到这一点？@DaveJones，我已经为您添加了问题的截图，目前正在等待同行审查。您能否添加一个带有您提到的缺陷的可折叠的截图？我找不到与示例有关的任何问题。@Ms.Tamil不幸的是，我的声誉太低，无法添加任何屏幕快照。重新创建的方法是打开链接，按任意按钮展开面板。拖动其中一个滑块使窗口变小，并注意到当窗口无法重新缩放以适应所有文本时文本是如何消失的。您可以捕获窗口的onresize事件，并在处理程序中再次执行for循环。@Ms.Tamil这听起来像是一个可行的解决方案，但是，将其缩放到100%会更容易。在保留“动画”的同时，有没有办法做到这一点？@DaveJones，我已经为您添加了问题的截图，目前正在等待同行审查。这解决了问题，但导致了另一个问题。“动画”中的滚动条没有运行。非常感谢你，伙计！：）这解决了问题，但导致了另一个问题。“动画”中的滚动条没有运行。非常感谢你，伙计！：）