在只使用香草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