javascript - 负责窗口比例的可折叠面板

Question

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

编辑:截图在这里:

Here是他们的例子:

可折叠代码

// Button Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) { content.style.maxHeight = null; }
        else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
}

受影响面板的 CSS 代码

.aboutCollapsible {
    font: 16px/24px "Roboto";
    background: #202020;
    text-align: justify;
    margin-bottom: 20px;
    width: 580px;
    max-width: 100%;
    padding: 1px 20px 5px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

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

我尝试了什么:我试图将值从像素修改为百分比。但是，这并不能使动画完全发挥作用。

Answer 1

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

将 else 语句中的代码更新为 content.style.maxHeight = "1000px";。您认为您的内容永远无法达到的足够大的高度。

旧:

在你的代码中，改变这个

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

到

else {
    content.style.maxHeight = "initial";
}

它对我有用。