Закрытие submenu по клику

Всем привет! Прошу помощи только недавно начал изучать js и есть небольшая проблема, я реализовал скрипт который при нажатии на кнопку "Услуг" активирует submenu, так же я реализовал крестик для его закрытия, все работает, но при повторном нажатии на "Услуги" после закрытия меню через крестик меню уже не выезжает, подскажите как мне разобраться с этой проблемой. Вот кусок кода:

const dropDownMenu = () => {
    window.addEventListener("DOMContentLoaded", () => {
        const submenu = document.querySelector(".header__subnavigation"),
            submenuSwitcher = document.querySelector(".submenu__switcher"),
            submenuClose = document.querySelector(".submenu__close");

        submenuSwitcher.addEventListener("click", () => {
            submenu.classList.toggle("header__subnavigation_active");
        });

        submenuClose.addEventListener("click", (e) => {
            if (e.target === submenuClose) {
                submenu.style.top = "-100%";
            }
        });
    });
};

export default dropDownMenu();

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

Автор решения: Arturas Lapinskas

По клику срабатывает событие toggle, добавляет, или удаляет класс если он есть, а на крестик у вас меняется стиль. Потому и не работает. Нужно оставить одну имплементацию или классами оперировать, или стили менять + toggle нужно убирать, и делать отдельно открытие и закрытие

→ Ссылка