Есть сайт с раскрывающимися подменю (боковая стрелка имеет направление вниз - класс 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);
}
Несмотря на наличие этого кода меню не разворачивается (не сворачивается). Подскажите как добиться разворачивания\сворачивания меню.
P.S.
- А div.FilterDropdown__filter-open-group включает в себя заголовок (как на рисунке Основной цвет корпуса) и стрелку для раскрытия\сворачивания меню.
- target-ом должен быть элемент - стрелка раскрытия\сворачивания меню и обращение к нему происходит через
childNodes[1]
. - Классы меняются для смены вида стрелок.