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