jQuery 单击外部并隐藏 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15402242/
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
Click outside and Hide Div
提问by Tim Cooley
I am trying to do the simple hide div when you click on the document. I can't seem to get it to work. I basically want the div to toggle on when you click on a button. And then if you click anywhere else (not on the div) it toggles off.
当您单击文档时，我正在尝试执行简单的隐藏 div。我似乎无法让它工作。我基本上希望 div 在您单击按钮时切换。然后，如果您单击其他任何地方（不在 div 上），它就会关闭。
Here is the Script:
这是脚本：
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$('.slidingDiv').slideToggle();
$(document).one(function(){
$('.show_hide').show();
});
});
});
Here is the CSS (this is the correct CSS now with the correct JQuery Below!)
这是 CSS（这是正确的 CSS，下面是正确的 JQuery！）
.slidingDiv {
background-color: #FFF;
border:3px solid #000;
border-radius:0 0 15px 15px;
float:right;
height:175px;
padding:20px;
position:relative;
top:-18px;
width:300px;
z-index:100;
display:none;
}
.show_hide {
}
And html:
和 html：
<div class="slidingDiv">Hello</div>
Any help would be awesome.
任何帮助都是极好的。
This is the whole thing I am now running including scripts:
这是我现在正在运行的全部内容，包括脚本：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){ //<----shorter version of doc ready. this one can be used ->jQuery(function($){
$('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
e.stopPropagation();
$('.slidingDiv').slideToggle();
});
$('.slidingDiv').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$('.slidingDiv').slideUp();
});
});
</script>
回答by Jai
Here in your case you need to stop the event to bubble to the parent with .stopPropagation():
在您的情况下，您需要通过以下方式停止事件以冒泡到父级.stopPropagation()：
$('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
e.stopPropagation();
$('.slidingDiv').slideToggle();
});
$('.slidingDiv').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$('.slidingDiv').slideUp();
});
From docs:
从文档：
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到该事件的通知。
FYI:
仅供参考：
I don't know this is needed to tell you or not but you should follow this way:
我不知道这是否需要告诉您，但您应该遵循以下方式：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){ //<----shorter version of doc ready. this one can be used ->jQuery(function($){
$('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
e.stopPropagation();
$('.slidingDiv').slideToggle();
});
$('.slidingDiv').click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$('.slidingDiv').slideUp();
});
});
</script>
回答by couzzi
OP,
操作，
What you need to do is bind the clickevent to the element you want to control showing the <div>, and a clickevent to the document, to handle the hiding. With that said, it's important to use e.stopPropagation()on your show function, so your event doesn't bubble up the document, thus hiding your <div>;
您需要做的是将click事件绑定到您要控制显示 的元素<div>，并将click事件绑定到document，以处理隐藏。话虽如此，重要的是e.stopPropagation()在您的 show 功能上使用，这样您的事件就不会冒泡document，从而隐藏您的<div>;
Fiddle : http://jsfiddle.net/qYfWv/
小提琴：http: //jsfiddle.net/qYfWv/
JS
JS
$(document).ready(function () {
$('button').click(function (e) {
$('div').fadeIn();
e.stopPropagation();
});
$(document).click(function (e) {
$('div').fadeOut();
});
});
回答by Ronophobia
Jai's code should work. If the code works in the fiddle and not on your site,that should mean you're not including jQuery correctly. Are you sure you're including the jQuery library in your code?
Jai 的代码应该可以工作。如果代码在小提琴中工作而不是在您的网站上工作，那应该意味着您没有正确包含 jQuery。您确定在代码中包含 jQuery 库吗？
You can use a CDN such as Google's jQuery CDN. Just add this to your HTML code:
您可以使用 CDN，例如 Google 的 jQuery CDN。只需将其添加到您的 HTML 代码中：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
回答by sasi
$('.show_hide').click(function(){
you forget show_hide is a class
你忘记了 show_hide 是一个类
回答by VeXii
insted of binding to ′document′ bind to the dom body tag.
insted 绑定到 'document' 绑定到 dom body 标签。
$('body').on('click', function(e){/* Magic here */})
$('body').on('click', function(e){/* Magic here */})
