Javascript菜单关闭
问题描述:
我在HTML中有一个菜单。当你点击“菜单”时,一个列表打开,再次点击“菜单”,列表关闭。Javascript菜单关闭
我需要的菜单关闭,如果用户点击屏幕
<script type="text/javascript">
$(function() {
var menuVisible = false;
$('#menuBtn').click(function() {
if (menuVisible) {
$('#menu').css({
'display': 'none'
});
menuVisible = false;
return;
}
$('#menu').css({
'display': 'block'
});
menuVisible = true;
});
$('#menu').click(function() {
$(this).css({
'display': 'none'
});
menuVisible = false;
});
});
答
创建一个onclick侦听文件应该是足够的任何地方:
document.onclick = myClickAnywhereHandler;
function myClickAnywhereHandler() {
alert("hide the menu");
$('#menu').css({
'display': 'none'
});
}
+0
这使整个事情不工作伙计 – Sam
答
下面是简单的HTML和jquery。希望它能帮助你。
的Html -
<div class="container">
<button id="menu">menu</button>
<div id="list">list</div>
</div>
的jQuery -
$('#menu').click(function(e) {
e.stopPropagation();
$('#list').slideToggle();
})
$('#list').click(function(e) {
e.stopPropagation();
});
$('body').click(function() {
$('#list').slideUp();
})
名单将toggle
上的菜单中点击slideUp
身体上的点击。
的jsfiddle - https://jsfiddle.net/dhananjaymane11/Lgfdmjgb/1/
答
jQuery的.toggle
功能切换的元件的可见性,与所述布尔值逻辑的代码是不必要的。
只要在文档内点击一下,就可以在菜单上拨打.toggle
。
$(document).click(function(){
$("#menu").toggle();
});
的可能的复制[jQuery的:通过单击DIV本身的任何地方除了关闭DIV(http://*.com/questions/6610022/jquery-close-div-by-clicking-anywhere-apart - 从这个div本身) –