Условная троичная оценка обоих выражений перед завершением цикла с перезаписью правильного значения maxHeight - PullRequest
0 голосов
/ 30 января 2019

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

Если щелкнуть подменю, то же самое будет сделано с его дочерними элементами списка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...