Как при ресайзе правильно пересчитать высоту блока?

Есть выпадающие меню в котором вложенное выпадающие меню. Что бы сделать анимацию появления я высчитываю высоту каждого блока во время загрузки, записываю ее в атрибут блока и скрываю блок. При ресайзе пытаюсь сделать то же самое

  function activeHeight() {
    let allAccordion = document.querySelectorAll('.accordion');

    allAccordion.forEach((item) => {
      let accordionParent = item.querySelectorAll('.accordion-parent');
      let accordionItem = item.querySelectorAll('.accordion-item');

      accordionItem.forEach((item) => {
        item.nextElementSibling.style.height = 'auto';
        item.nextElementSibling.dataset.height = item.nextElementSibling.offsetHeight;
        item.nextElementSibling.style.height = '0';
      });

      accordionItem.forEach((item) => {
        if (item.classList.contains('active')) {
          let element = item.closest('.accordion-parent');
          if (element?.querySelectorAll('.accordion-item.active')) {
            const allElement = element.querySelectorAll('.accordion-item.active');

            allElement.forEach((item) => {
              let innerElement = item.nextElementSibling.querySelectorAll('.accordion-item.active');

              let countInnerElement = +item.nextElementSibling.dataset.height;

              innerElement.forEach((element) => {
                countInnerElement += +element.nextElementSibling.dataset.height;
              });

              item.nextElementSibling.style.height = countInnerElement + 'px';
            });
          }
        }
      });
    });
  }

Но высота начинает высчитываться по разному. введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения


Ответы (0 шт):