点击菜单以外的任何地方时隐藏菜单。
点击菜单以外的任何地方时隐藏菜单。
当我点击图标时，会出现一个菜单。目前，我可以通过点击“关闭”图标来关闭菜单，但我希望当菜单可见时，可以通过点击菜单以外的任何地方来关闭它。\n这是一个jsFiddle链接：http://jsfiddle.net/budapesti/3v5ym2bp/3/\n例如下面的代码不起作用：\n
$(document).click(function() {
if($('.menu').is(":visible")) {
$('.menu').hide()
}
});
\n我找到了类似的问题，例如jQuery：单击元素外的任何地方隐藏元素和如何检测元素外的点击事件？，但无法使这些解决方案对我起作用。\n
\n编辑：我想知道is(\":visible\")是否适用于使用jQuery \"animate\"方法的情况？
当点击菜单之外的任何地方时，隐藏菜单的问题是因为需要在菜单显示后，在文档上绑定一个点击事件，该事件将确保任何点击菜单之外的地方都会关闭菜单。
解决方法是在文档上绑定一个点击事件，并在菜单显示后执行以下操作：
1. 检查点击事件的目标元素是否是菜单或关闭按钮的子元素；
2. 如果目标元素不是菜单的子元素或是关闭按钮的子元素，则调用关闭菜单的函数；
3. 在关闭菜单后，解绑文档上的点击事件。
这里需要评估事件对象以及触发事件的元素，如果元素在菜单内（除了关闭按钮），则不进行任何操作；如果元素在菜单外，则关闭菜单。关闭菜单的相关操作放在一个单独的函数中，并在关闭后解绑文档上的点击事件。
具体的代码示例可以在下面的链接中查看：
http://jsfiddle.net/3v5ym2bp/15/
可以点击下面的链接查看演示效果：
问题出现的原因：当点击菜单以外的区域时，菜单仍然显示出来，没有隐藏起来。
解决方法：在点击菜单以外的区域时，隐藏菜单。
代码示例：
.menu {
position: fixed;
width: 285px;
height: 100%;
left: -285px;
background: #202024;
z-index: 1;
}
.glyphicon-remove, ul {
color: #fff;
padding: 10px;
}
/* 添加了一个不可见的块 */
.inv {
display:none;
width:100%;
height:100%;
position:fixed;
margin:0;
}
"use strict";
var main = function () {
$('.icon-menu').click(function () {
$('.icon-menu').hide();
$('.inv').show(); //添加
$('.menu').animate({
left: "0px"
}, 200);
});
//添加
$('.inv').click(function () {
$('.inv').hide();
$('.menu').animate({
left: "-285px"
}, 200);
$('.icon-menu').show();
});
$('.closed').click(function () {
$('.inv').hide();//添加
$('.menu').animate({
left: "-285px"
}, 200);
$('.icon-menu').show();
});
};
$(document).ready(main);
另一个简单的例子：[http://jsfiddle.net/3v5ym2bp/17/](http://jsfiddle.net/3v5ym2bp/17/)
