Проблема с обновлением максимальной высоты родительского элемента во вложенных аккордеонах (неправильные измерения) ⇐ CSS

[Anonymous]

Я пытаюсь создать вложенную структуру аккордеона, в которой каждый аккордеон при нажатии динамически обновляет как свой собственный, так и maxHeight своего родителя. Однако всякий раз, когда я открываю дочерний аккордеон, высота родителя иногда вычисляется неправильно. Например, я ожидаю, что он будет около 288 пикселей, но в итоге получается 160 пикселей или часть контента обрезается.
Ниже приведена упрощенная версия моего обработчика кликов. При нажатии кнопки .aside-accordion я устанавливаю maxHeight дочернего аккордеона, а затем использую цикл while для обновления любых родительских элементов .accordion-content:

Код: Выделить всё

document.addEventListener('click', function(event) {
if (event.target.matches('.aside-accordion')) {
const button = event.target;
const accordionMenu = button.nextElementSibling;
const buttonArrow = button.querySelector('.arrow');

button.classList.toggle('active');

if (button.classList.contains('active')) {
buttonArrow.classList.add('rotate-180');
accordionMenu.style.maxHeight = accordionMenu.scrollHeight + 'px';
} else {
buttonArrow.classList.remove('rotate-180');
accordionMenu.style.maxHeight = 0;
}

let parentContent = accordionMenu.parentElement.closest('.accordion-content');
while (parentContent) {
const parentButton = parentContent.previousElementSibling;
if (parentButton && parentButton.classList.contains('active')) {
// Here I'm assigning the parent's actual height
parentContent.style.maxHeight = parentContent.scrollHeight + 'px';
}
parentContent = parentContent.parentElement.closest('.accordion-content');
}
}
});

Демонстрация в реальном времени
Ожидание: когда дочерний аккордеон открывается, все родительские аккордеоны должны автоматически расширяться, чтобы соответствовать высоте дочернего элемента, чтобы содержимое было полностью видно. .
Проблема: иногда maxHeight родительского объекта оказывается меньше ожидаемого или частично скрывает содержимое, и для исправления требуется второй щелчок. Я использую переход: max-height 0,3 с легкость; переполнение: скрыто; на всех аккордеонах.
Я пробовал использовать большое жестко закодированное значение (например, 999999px) вместо ScrollHeight, и это «исправляет» проблему, но это явно не чистое решение. requestAnimationFrame или небольшие вызовы setTimeout иногда помогают, но все равно дают противоречивые результаты. Я также тестировал переход, но иногда контент «подпрыгивает» при первом открытии.
Вопрос: Как я могу надежно обновить родительский maxHeight во вложенном аккордеоне, чтобы при первом щелчке всегда показывался правильная развернутая высота (без сбоев и повторного нажатия)?

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-is-wrong