Скрытие меню по клику на крестик и пункт данного меню

@androv77 · Регистрация: 10.10.2022

Студворк — интернет-сервис помощи студентам

Есть скрытая менюшка. Она открывается по клику крестика на всю ширину и высоту экрана (мобильная версия).
По этому же крестику менюшка и закрывается.
Немогу сделать, чтобы менюшка закрывалась и по нажатию на любой пункт меню.
Так как сайт одностраничный, то пункты меню перемещают сраницу к нужному разделу. И меню при этом приходится закрывать самому по крестику. Ниже html и js

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="top-menu element-animation">
     <ul id="navbar">
       <li><a href="#object1">Find position</a></li>
       <li><a href="#object2">Categories</a></li>
       <li><a href="#object3">Skills</a></li>
       <li><a href="#object4">Customer</a></li>
     </ul>
     <div class="top-login">
  <div class="top-ligin-login">Login</div>
<div class="top-ligin-Trial">Free Trial</div>
  </div>
     </div>

JavaScript
1
2
3
4
5
6
7
let menuBtn = document.querySelector('.menu-btn');
let menu = document.querySelector('.top-menu');
 
menuBtn.addEventListener('click', function(){
    menuBtn.classList.toggle('active');
    menu.classList.toggle('active');
})

Необходимо что бы по клику пункта меню ему присваивался класс 'active', а у крестика (menuBtn) этот класс удалялся.

@AlexZaw · 04.05.2023, 15:46

Сообщение от androv77

Необходимо что бы по клику пункта меню ему присваивался класс 'active'

Поскольку вы не уточнили что именно является пунктом меню (li или ссылка) и не привели css который помог бы это понять, то предположу, что пункт меню это li.

Сообщение от androv77

а у крестика (menuBtn) этот класс удалялся.

Я так понимаю что класс active нужно удалять не только у крестика, но и у самого меню?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let menuBtn = document.querySelector(".menu-btn");
let menu = document.querySelector(".top-menu");
let navList = document.querySelector("#navbar");
 
menuBtn.addEventListener("click", function () {
  menuBtn.classList.toggle("active");
  menu.classList.toggle("active");
});
 
navList.addEventListener(
  "click",
  function (e) {
    e.preventDefault();
    const navItem = e.target.closest("li");
    if (navItem) {
      for (child of navList.children) {
        child.classList.remove("active");
      }
      navItem.classList.add("active");
      menuBtn.classList.remove("active");
      menu.classList.remove("active");
    }
  }
);

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

Скрытие меню по клику на крестик и пункт данного меню

Решение