Раскрытие (сворачивание) меню

Question

Есть сайт с раскрывающимися подменю (боковая стрелка имеет направление вниз - класс arrow_01_B (раскрытое подменю) или имеет направление вправо - arrow_01_R (свернутое подменю))

Привожу код для раскрытия/сворачивания меню

let elemsoffilteropengroup = document.querySelectorAll('.FilterDropdown__filter-open-group');

for (let i = 0; i < elemsoffilteropengroup.length; i++) {
  elemsoffilteropengroup[i].addEventListener('click', function(e) {
    if (e.target.childNodes[1].classList.contains('arrow_01_R')) {
      firstProperty = 'FilterDropdown__toggle-opened';
      secondProperty = 'arrow_01_B';
      lastProperty = 'IconFont_arrow_01_B';
      e.target.childNodes[1].classList.item(0) = firstProperty;
      e.target.childNodes[1].classList.item(1) = secondProperty;
      e.target.childNodes[1].classList.item(e.target.childNodes[1].classList.length - 1) = lastProperty;
    } else {
      firstProperty = 'FilterDropdown__toggle-closed';
      secondProperty = 'arrow_01_R';
      lastProperty = 'IconFont_arrow_01_R';
      e.target.childNodes[1].classList.item(0) = firstProperty;
      e.target.childNodes[1].classList.item(1) = secondProperty;
      e.target.childNodes[1].classList.item(e.target.childNodes[1].classList.length - 1) = lastProperty;
    }
  }, true);
}

Несмотря на наличие этого кода меню не разворачивается (не сворачивается). Подскажите как добиться разворачивания\сворачивания меню.

Answer 1

Попробуйте этот код. Протестировать не могу, потому что не предоставлен рабочий пример, поэтому могут быть ошибки. Ну и не знаю какие браузеры целевые, так что подгоните под нужные.

let elemsOfFilterOpenGroup = document.querySelectorAll('.FilterDropdown__filter-open-group');

Array.from(elemsOfFilterOpenGroup).forEach( element => {
    element.addEventListener( 'click', clickHandler );
});

function clickHandler(){
    let arrow = this.querySelector('i'),
        openedClasses = ['FilterDropdown__toggle-opened','arrow_01_B','IconFont_arrow_01_B'],
        closedClasses = ['FilterDropdown__toggle-closed','arrow_01_R','IconFont_arrow_01_R'];
    
    if( arrow.classList.contains('arrow_01_R') ){
        arrow.classList.remove(...closedClasses);
        arrow.classList.add(...openedClasses);
    } else {
        arrow.classList.remove(...openedClasses);
        arrow.classList.add(...closedClasses);
    }
}

БЛОГ НА HUSL

Раскрытие (сворачивание) меню

Ответы (1 шт):