@urajo

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

Есть выпадающие меню в котором вложенное выпадающие меню. Что бы сделать анимацию появления я высчитываю высоту каждого блока во время загрузки, записываю ее в атрибут блока и скрываю блок. При ресайзе пытаюсь сделать то же самое
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';
            });
          }
        }
      });
    });
  }

Но высота начинает высчитываться по разному.
62cfc15397d32364512283.png
62cfc15d5072f378784028.png
62cfc16536f4e900021627.png
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
SemanticMoscow
@SemanticMoscow
ну нужно считать,
нужно просто спросить у браузера какая в данный момент у него получилась высота блока.
спрашивать через offsetHeight
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы