Как я могу добавить кнопку «Адаптивная переключателя» для мобильного навигационного меню с помощью JavaScript? ⇐ Javascript

[Anonymous]

Я работаю над задачей CSS Lab, где нам пришлось реагировать на веб -страницу, используя медиа -запросы. Одной из бонусных задач было добавить кнопку переключения для меню навигации на мобильном телефоне, и я немного боролся с ней. Я не уверен, является ли проблема моим селектором (UL VS NAV) или как я переключаю класс. Я тоже пытался нацелиться на прямое, но не удачи.

Код: Выделить всё

const menuToggle = document.getElementById("menu-toggle");
const mainMenu = document.getElementById("main-menu");

menuToggle.addEventListener("click", () => {
mainMenu.classList.toggle("show");
});< /code>
@media (max-width: 480px) {
#main-menu ul {
display: none;
flex-direction: column;
}

#main-menu.show ul {
display: flex;
}

#menu-toggle {
display: block;
}
}< /code>

[url=#]All About CSS[/url]
☰ Menu

[list]
[*][url=#]Home[/url]
[*][url=#]Articles[/url]
[*][url=#]About[/url]
[*][url=#]FAQ[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... javascript