Я сделал простое меню. При нажатии на блочный элемент, на котором написано "Кнопка" появляется подменю. Убрать подменю можно при нажатии на пустую область экрана. А как сделать так, чтобы оно убиралась при повторном нажатии на блочный элемент?
1 ответ
Используйте метод toggle():
Вариант 1 - если нужно скрыть/показать меню при нажатии на кнопку
$(".test").on("click", function() {
$(".menu").toggle();
});
.test {
width:100px;
background: #dfdfdf;
padding:5px;
cursor:pointer;
}
.menu {
display: none;
margin-top:10px;
width: 150px;
height: 150px;
background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">кнопка</div>
<div class="menu">меню</div>
Вариант 2 - если нужно скрыть/показать меню при нажатии на кнопку, а также если нужно скрывать меню при нажатии за пределами меню
$(document).on("click", function(e) {
if (e.target.id != 'test' && e.target.id != 'menu') {
$("#menu").hide();
} else if (e.target.id != 'menu') {
$("#menu").toggle();
}
});
#test {
width: 100px;
background: #dfdfdf;
padding: 5px;
cursor: pointer;
}
#menu {
display: none;
margin-top: 10px;
width: 150px;
height: 150px;
background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">кнопка</div>
<div id="menu">меню</div>
UPD: Вариант 3 на javascript - открытие меню при нажатии на кнопку, закрытие при повторном нажатии на кнопку или на область вне меню
document.addEventListener("click", function(e) {
let m = document.getElementById('menu');
if (e.target.id != 'test' && e.target.id != 'menu') {
m.style.display = 'none';
} else if (e.target.id == 'test') {
m.style.display = (m.style.display != 'block') ? 'block' : 'none';
}
});
#test {
width: 100px;
background: #dfdfdf;
padding: 5px;
cursor: pointer;
}
#menu {
display: none;
margin-top: 10px;
width: 150px;
height: 150px;
background: #d3d3d3;
}
<div id="test">кнопка</div>
<div id="menu">меню</div>
-
А как сделать, чтобы также и при нажатии на пустую область подменю закрывалось ? 31 окт 2016 в 17:03
-
-
1
-
-