Как реализовать функцию закрытия меню при щелчке на любую область экрана?

Как заставить меню открываться/закрываться по нажатию кнопки "Меню" и автоматически закрываться при клике вне его области на странице?
  • 1 ноября 2023 г. 16:08
Ответы на вопрос 2
Для реализации функции закрытия меню при щелчке на любую область экрана, можно использовать следующий код на JavaScript:

```javascript
// Получаем элементы меню и кнопку "Меню"
var menu = document.getElementById("menu");
var menuButton = document.getElementById("menu-button");

// Функция для открытия или закрытия меню
function toggleMenu() {
  menu.classList.toggle("open");
}

// При клике на кнопку "Меню", вызываем функцию открытия/закрытия меню
menuButton.addEventListener("click", toggleMenu);

// При клике вне области меню, закрываем его
window.addEventListener("click", function(event) {
  if (event.target != menu && event.target != menuButton) {
    menu.classList.remove("open");
  }
});
```

В данном коде предполагается, что у вас есть элемент меню с id "menu" и кнопка "Меню" с id "menu-button". При клике на кнопку, вызывается функция toggleMenu, которая добавляет/удаляет класс "open" у элемента меню, чтобы показать/скрыть его. При клике на любую область экрана, кроме меню и кнопки, меню будет закрываться. 

Необходимо также добавить соответствующие стили для класса "open", чтобы меню выглядело и работало правильно.
можно проверять клики на document и посредством сравнения родителей элемента меню и event.target определить, является ли элемент меню родителем
Похожие вопросы