Как сделать раскрытие подменю js?

Question

[anmkh]

Помогите, пожалуйста добить скрипт

Сейчас этот код работает нормально только если 2 уровня вложенности меню, не как не достучусь до 3 уровня. На 3 уровне не добавляется класс active

let menuLinks = document.querySelectorAll(".menu__child");
    // проверка если элементы существуют (через длину)
    if (menuLinks.length > 0) {
        // идем в цикле
        for (let index = 0; index < menuLinks.length; index++) {
            const menuLink = menuLinks[index];
            // условие для отмены действия по умолчанию
            menuLink.addEventListener("click", function (e) {
                if (e.target.classList.contains("menu__sub_link") || e.target.closest(".menu__sub_link")) {
                    // если нажата ссылка в подменю, то предотвращаем действие по умолчанию только для нее
                    return;
                }
                e.preventDefault(); // отменяем действие по умолчанию
                menuLink.classList.toggle("_active");
            });
        }
    }
}

Comments

[Kentavr16]

Код вырвано из контекста, мне лично не до конца понятно что за вложенность, куда вложенность. Попробую угадать - дело в

if (e.target.classList.contains("menu__sub_link") || e.target.closest(".menu__sub_link"))

. А именно в таргет клозест, который видимо на некотором уровне вложенности находит-таки такого родителя.

[anmkh]

Kentavr16, Да все верно дело в этом, но при клике в следующем подменю не нужно убирать класс у предыдущего, а он убирает из за toggle

[Kentavr16]

anmkh, а давай ты добавишь свой хтмл и нормально расскажи что за вложенность ты хочешь получить? Я не до конца понимаю контекст.

[anmkh]

Kentavr16, залил как получилось на codepen https://codepen.io/fuktsbts-the-bold/pen/LYadKoW

Нажимаю фулфилмен, все ок перекидывает на следующее подменю. Далее там идет Wildberries у которого тоже есть подменю и с ним уже проблемы.
Скрин как должно получиться, проблема только с подменю wildberries.
Нужно чтобы нажал на него и предыдущее не закрылось (класс active не должен убираться)

Answer 1

[Kentavr16]

menuLink.addEventListener("click", function (e) {
                e.stopPropagation(); // замени preventDefault на это
                menuLink.classList.toggle("_active");
            });

Код жесть конечно.
Помогло - отметь решением.

Comments

[anmkh]

А что конкретно жесть? Может вообще переписать?

[anmkh]

anmkh, Да вроде оно, только по ссылкам не переходит внутри

[Kentavr16]

anmkh, Да вроде все переходит...

[anmkh]

Kentavr16, Понял, переписал вот так

const menuBody = document.querySelector(".menu__body");
    menuBody.addEventListener("click", (e) => {
        if (e.target.nodeName !== "SPAN") return;
        e.target.parentNode.classList.toggle("_active");
    });

[Kentavr16]

А что конкретно жесть?

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