Страницы

Поиск по вопросам

четверг, 20 июня 2019 г.

Скрыть выпадающее меню при клике куда угодно JQuery

Хочу сделать меню, которое открывается по нажатию на кнопку и закрывается при клике по любой части экрана. Проблема в том, что меню закрывается при клике куда угодно, кроме кнопки открывания. По моей задумке, после открытия меню класс у кнопки убирается и она должна становиться неактивна, а значит становится такой же как и любая часть документа, но этого почему-то не происходит. В чем моя ошибка?
$(document).ready(function() { $(hidden).slideUp();
$('.switch').click(function() { $(hidden).slideDown(300); $('#drop-but').removeClass('switch'); return false; });
$(document).click(function() { $(hidden).slideUp(300); $('#drop-but').addClass('switch'); }); });


Ответ

Как вариант:
$(function() { $('.menu-wrap').on('click', function() { var $this = $(this); if ($this.hasClass('active')) { $this.removeClass('active'); $(document).off('click.menu'); } else { $this.addClass('active'); $(document).on('click.menu', function(e) { if ($(e.target).closest('.menu-wrap').length === 0) { $('.menu-wrap').removeClass('active'); $(document).off('click.menu'); } }); } }); }); .menu-wrap { position: relative; width: 100px; } .menu-title { width: 100%; border: 1px solid black; cursor: pointer; transition: all .5s; } .menu-wrap.active .menu { visibility: visible; opacity: 1; } .menu { border: 1px solid black; border-top: none; width: 100%; visibility: hidden; opacity: 0; transition: all .5s; } ul { list-style-type: none; margin: 0; padding: 0; } li:hover { cursor: pointer; background: #eee; }


Комментариев нет:

Отправить комментарий