仅使用 vanilla JS 制作手风琴布局时元素高度的问题

Question

我的任务是仅使用香草JS制作手风琴布局.

我遇到的问题是，当我减小窗口大小并在可折叠面板内打开一个选项卡时，高度会增加，因为文本现在更大了，所以当我再次全屏时，它仍然保持窗口较小时的大小，这给了我很多空白。

function slideDown(element){

    element.classList.add('active');

    element.style.height="auto";

    element.style.display='block';

    element.style.margin = "auto";

    var height = element.clientHeight + "px";

    element.style.height = "0px";

    element.style.marginTop="16px";

    element.style.marginBottom="16px";

    setTimeout(() => {

        element.style.height = height;

    }, 0) }

所以这里的问题是，每次我在手风琴中打开一个标签时，“auto”都会读取内容的高度（在较小的窗口中，内容的高度总是更大，以便将段落放入屏幕中），所以当我再次全屏显示时，它保持该大小，直到我重复此操作。

我需要一个解决方案，该解决方案将根据窗口大小更改元素的高度，或者当我在可折叠面板中使用向下滑动动画时，需要另一种方法来确定内容的高度。

Answer 1

如果要使此动态化，可以检测到窗口已调整大小并重新计算元素高度。window.onresize = function(event) {     // resize your element here     };请参见： https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event