jQuery 单击外部时如何隐藏 DIV 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13892375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide a DIV element when I click outside
提问by andys
I have a divand want to hide it when I click outside. My code is:
我有一个div并且想在我点击外面时隐藏它。我的代码是：
<div id="mydiv">The div must be above button</div>
$('#mydiv').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#mydiv').fadeOut(300);
});
But it is not working for me ...
但它对我不起作用......
UPDATE
更新
Full code is presented below. When I click on a button it shows a divabove, so I need to hide this divwhen I click outside.
完整代码如下。当我点击一个按钮时，它会在div上面显示，所以div当我点击外面时我需要隐藏它。
<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>
$("#but button").click(function(){
var pos = $(this).offset(),
div = $("#mydiv");
// Make it visible off-page so
// we can measure it
div.css({
"display": "block",
"border": "1px solid black",
"position": "absolute",
"left": -10000,
"top": 0
});
// Move it where we want it to be
div.css({
"left": pos.left - 40,
"top": pos.top - div.height() - 10
});
});
$('#myDiv').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#mydiv').fadeOut(300);
});
采纳答案by Warlock
In javascript clickis a bubbling event, it starts on a divand goes up to a document. When you stop an event propagation using a stopPropagation()function, a click on the document is not handled. So, to solve your problem just remove e.stopPropagation().
在 javascript click是一个冒泡事件，它从一个div开始并上升到一个文档。当您使用stopPropagation()函数停止事件传播时，不会处理对文档的单击。因此，要解决您的问题，只需删除e.stopPropagation().
The best way is:
最好的办法是：
$('#mydiv').click(function(e) {
e.stopPropagation();
$(this).fadeOut(300);
});
If I click on this div, how to make to click outside and hide this div ?
如果我点击这个 div，如何点击外部并隐藏这个 div？
Ok, let's imagine, that when you are clicking on a container with id "wrapperId", "myDiv" should be hidden:
好的，让我们想象一下，当您单击 ID 为“wrapperId”的容器时，应该隐藏“myDiv”：
$("#wrapperId").click(function(e){
$('#mydiv').fadeOut(300);
})
if container is a document, you can use $(document)instead of $("#wrapperId").
如果容器是文档，则可以使用$(document)代替$("#wrapperId")。
It is not working look what is happening: jsbin.com/ilowij/7
它不起作用看看发生了什么：jsbin.com/ilowij/7
You should stop a click event propagation when you are clicking the button. Make these changes:
当您单击按钮时，您应该停止单击事件传播。进行这些更改：
$("#but button").click(function(e){
e.stopPropagation();
...
}
回答by prakash2089
Try with below code that checks event target
尝试使用以下检查事件目标的代码
$(document).click(function(e) {
if(e.target.id!="mydiv"){ // if click is not in 'mydiv'
$('#mydiv').hide(3000);
}
});
回答by A. Wolff
回答by Sam G
Try the below solution which is easy and it's even working recursive:
尝试以下简单的解决方案，它甚至可以递归运行：
$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
回答by codecare.nl
Why all that just use css3 target
为什么所有这些都只使用 css3 目标
<a href='#login'>Login</a>
<div id='login'>
blah blah blah
</div>
css:
#login{width:400px;height:600px;background:#fff;margin:10%
auto;position:absolute;left:0;right:0;
}
now we will hide the login box by putting a class on it
<div class='lightbox' id='login'>
</div>
css:
.lightbox{display:none;}
.lightbox:target{display:block;}
thats all the code dont need too use javascript
这就是所有代码不需要太使用javascript
回答by Zac Zeng
The simplest way is to capture the onclick event of the document. You know this click event happens outside the element that you are interested, then just return false. I used this trick to hide a popup menu when a click outside the menu event fires.
最简单的方法就是捕获文档的onclick事件。你知道这个点击事件发生在你感兴趣的元素之外，然后只返回 false。当触发菜单事件之外的点击时，我使用这个技巧来隐藏弹出菜单。
回答by Jerin Stephen
$('html').click(function() {$("div").css({"display": "none"});});$('.option').click(function(event){event.stopPropagation();});
$('html').click(function() {$("div").css({"display": "none"});});$('.option').click(function(event){event.stopPropagation();});
$(".search").keyup(function(){search=$(".search");if(search.val()!= "" ){$("div").css({"display": "block"});}else{$("div").css({"display": "none"});}});
$(".search").keyup(function(){search=$(".search");if(search.val()!= "" ){$("div").css({"display": "block"});}else{$("div").css({"display": "none"});}});
<input type="search" class="form-control search" name="search" autocomplete="off" >
<div>
</div>
this will help to hide
这将有助于隐藏
回答by saadk
check this one
检查这个
<a href="#" id="link">Click me</a>
(function($) {
$("#link").click(function(e){
e.stopPropagation();
var div = $("#show_hide");
// Make it visible off-page
div.css({
"display": "block"
});
});
$(document).click(function(e){
$('#show_hide').fadeOut(300);
});
})(jQuery);
you can checkout this link for example..
例如，您可以查看此链接。
check this http://jsfiddle.net/x5Env/
回答by Michael Antonius
try .blur(), and like this:
尝试.blur()，并像这样：
$('#mydiv').blur(function(e) {
$(this).fadeOut(300);
});
Hope it help
希望有帮助
