Вход

Просмотр полной версии : Раскрытие (сворачивание) меню


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

https://i.stack.imgur.com/wOvbH.png

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


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);
}


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

voraa
03.04.2021, 21:58
Очень много странностей в коде у вас

elemsoffilteropengroup[i].addEventListener('click', function(e) ...
Обработчик вешается на какой то div.FilterDropdown__filter-open-group

Далее идет
if (e.target. ...
А target будет какой-нибудь <span> или <i> в этом блоке.
Это именно то, что вы хотели?

.childNodes[1]
childNodes - это все дочернии узлы внутри узла. Вы поставили пробел между элементами <span> <span> и этот пробел станет текстовым узлом. Перевод строки и табуляции для выравнивания кода тоже становятся узлами. Так, что поосторожнее с childNodes. Если нужны именно элементы, то используйте .children

Так, что кому вы потом очень странным образом назначаете и меняет классы, остается загадкой.

И если вы используете средства разработчика браузера, то что стоит пройти в отладчике этот код и посмотреть что чему вы назначаете, и заглянуть в консоль по поводу красного кружка с восклицательным знаком и цифрой 9 в правом верхнем углу

vladdvin
04.04.2021, 09:22
1. А div.FilterDropdown__filter-open-group включает в себя заголовок (как на рисунке Основной цвет корпуса) и стрелку для раскрытия\сворачивания меню.
2. target-ом должен быть элемент <i> - стрелка раскрытия\сворачивания меню и обращение к нему должно происходить через childNodes[1].
3. Классы меняются для смены вида стрелок.

voraa
04.04.2021, 10:09
и обращение к нему должно происходить через childNodes[1].
Ну раз должно....

Если <i> это e.target, то что e.target.childNodes[1]?