Хочу сделать меню, которое открывается по нажатию на кнопку и закрывается при клике по любой части экрана. Проблема в том, что меню закрывается при клике куда угодно, кроме кнопки открывания.
По моей задумке, после открытия меню класс у кнопки убирается и она должна становиться неактивна, а значит становится такой же как и любая часть документа, но этого почему-то не происходит. В чем моя ошибка?
$(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;
}
Комментариев нет:
Отправить комментарий