Проблема с высотой элемента при создании макета гармошки с использованием только ванили JS

Question

У меня есть задача сделать макет аккордеона, используя только vanilla 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) }

Итак, проблема здесь, каждый раз, когда я открываю вкладку в аккордеоне, «авто» считывает высоту содержимого (которая всегда больше в меньшем окне, чтобы соответствовать абзац в экран), поэтому, когда я снова переключаюсь на полноэкранный режим, он остается того же размера, пока я не повторю это действие.

Мне нужно решение, которое изменит высоту элемента в зависимости от размера окна, или другой способ определения высоты содержимого, когда я использую анимацию скольжения вниз в аккордеоне.

Answer 1

Если вы хотите сделать это динамическое c, вы можете обнаружить, что размер окна был изменен, и пересчитать высоту вашего элемента.

window.onresize = function(event) {
    // resize your element here
};

См .: https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event