Задать вопрос
WoodyAndBuzz
@WoodyAndBuzz

Как скрыть меню при нажатии на любую другую область?

Есть код при нажатии на кнопку которого появляется всплывающее меню. Однако чтобы убрать его надо нажать на ту же кнопку. А хотелось бы чтобы окно исчезало при нажатии на любую область вне окна.
<div class="form-menu">
                            <button class="form-browse"><p>Browse &#x25BE</p></button> 
                            <div id="drops" class="drop-size drop-1">
                                <div class="drop-flex">
                                    <h3 class="drop-h3">Women</h3>
                                    <ul class="drop-menu">
                                        <li><a href="" class="drop-link">Dresses</a></li>
                                        <li><a href="" class="drop-link">Tops</a></li>
                                        <li><a href="" class="drop-link">Sweaters/Knits</a></li>
                                        <li><a href="" class="drop-link">Jacets/Coats</a></li>
                                        <li><a href="" class="drop-link">Blazers</a></li>
                                        <li><a href="" class="drop-link">Legings/Pants</a></li>
                                        <li><a href="" class="drop-link">Skirts/Shots</a></li>
                                        <li><a href="" class="drop-link">Accessories</a></li>
                                    </ul>
                                    <h3 class="drop-h3">Men</h3>
                                    <ul class="drop-menu">
                                        <li><a href="" class="drop-link">Tees/Tank tops</a></li>
                                        <li><a href="" class="drop-link">Shirts/Polos</a></li>
                                        <li><a href="" class="drop-link">Sweaters</a></li>
                                        <li><a href="" class="drop-link">Sweatshirts/Hoodies</a></li>
                                        <li><a href="" class="drop-link">Blazers</a></li>
                                        <li><a href="" class="drop-link">Jackets/vests</a></li>                    
                                    </ul>
                                </div>
                            </div> 
                        </div>

const handleClick = (event) => {
             let name = document.getElementById("drops").classList.toggle("drop-1")
             event.preventDefault();
             console.log(name);
            }
        document.querySelector(".form-browse").addEventListener("click", handleClick);

62302d1401c4c949279682.jpeg
  • Вопрос задан
  • 202 просмотра
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
Ещё пара идей:
  1. рисовать прозрачный div прямо под меню поверх всего остального и слушать click на нём – так любой клик «мимо меню» будет отловлен этим div'ом
  2. слушать клик на корневом document – событие «всплывает» наверх, и если никто его раньше отловит, дойдёт до document. Этот способ менее надёжный, т.к. мимо меню можно кликнуть на другом элементе, где клики ловят и дальше не отпускают.
Ответ написан
Комментировать
@BX442
В JS есть событие, фокус/потеря фокуса, обрабатывая это событие, можно закрывать элемент при клике мышкой если элемент не в фокусе.
Если вам нужно научится, а не готовое решение, то почитайте Выразительный JavaScript: Обработка событий
Если образец готового, то вот:
Пример 1.
Пример 2.
Ответ написан
Комментировать
beliyadm
@beliyadm
because open source matters
$(document).mouseup(function (e){
			var div = $(".form-menu");
			if (!div.is(e.target)
				&& div.has(e.target).length === 0 && div.is(':visible'))
				{
				div.hide();
			}
		});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
13 дек. 2024, в 22:23
1000 руб./за проект
13 дек. 2024, в 22:13
2000 руб./за проект