在外部单击并隐藏Div [英] Click outside and Hide Div
问题描述
当您单击文档时,我正在尝试执行简单的hide div.我似乎无法正常工作.我基本上希望div在您单击按钮时打开.然后,如果您单击其他任何地方(不在div上),它将关闭.
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.
以下是脚本:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$('.slidingDiv').slideToggle();
$(document).one(function(){
$('.show_hide').show();
});
});
});
这里是CSS(现在这是正确的CSS,下面带有正确的JQuery!)
Here is the CSS (this is the correct CSS now with the correct JQuery Below!)
.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 {
}
和html:
<div class="slidingDiv">Hello</div>
任何帮助都会很棒.
这是我现在正在运行的全部内容,包括脚本:
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>
推荐答案
在这种情况下,您需要停止事件以使用.stopPropagation()
冒泡给父对象:
Here in your case you need to stop the event to bubble to the parent with .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();
});
来自文档:
event.stopPropagation()
防止事件使DOM树冒泡,从而防止任何父处理程序收到该事件的通知.
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
仅供参考:
我不知道是否需要告诉您,但是您应该遵循这种方式:
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>
这篇关于在外部单击并隐藏Div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!