Я пытаюсь создать многоуровневое раскрывающееся меню, которое реагирует и использует переходы.Проблема, которую я пытаюсь исправить, связана с мобильным представлением подменю (имя класса = подменю; оно розового цвета).Чтобы переход работал, я пытаюсь установить maxHeight элементов .submenu__item li равным 60rem onclick.Я использую троичное выражение, чтобы сделать это.Похоже, что троичный оператор оценивает оба условия (применяя 60rem, затем повторно применяя 0) до завершения цикла.
В качестве альтернативы, я был бы признателен за любые рекомендации по рефакторингу моего кода.Это мой первый пост в stackoverflow, и я все еще новичок в веб-разработке.Очень ценю любые рекомендации!
Полный код на CodePen: https://codepen.io/mrsandman98765/pen/LMvMam
// toggeSlidedown увеличивает maxHeight элементов списка с 0 до 60rem, если он является потомком выпадающего меню или подменю
function toggleSlidedown(event) {
const drop_items = document.querySelectorAll('.dropdown__item');
const sub_items = document.querySelectorAll('.submenu__item');
if (event.target.nextElementSibling.className == 'dropdown') {
drop_items.forEach(function(drop_item) {
drop_item.style.maxHeight = drop_item.style.maxHeight === '60rem' ? '0' : '60rem';
})
}
if (event.target.nextElementSibling.className == 'submenu') {
sub_items.forEach(function(sub_item) {
sub_item.style.maxHeight = sub_item.style.maxHeight === '60rem' ? '0' : '60rem';
// used for debugging
console.log(event.target.nextElementSibling.className);
})
} else {
// used for debugging
console.log(event.target);
}
}
Ожидаемые результаты должны быть следующими:
Если щелкнуть раскрывающееся меню, его дочерние элементы списка должны иметь значение maxHeight, измененное с 0 до 60rem.Похоже, что это необходимо для правильной работы переходов, иначе меню не открывается плавно.
Если щелкнуть подменю, то же самое будет сделано с его дочерними элементами списка.