在div外部单击时调用jQuery show / hide函数
[英]Call jQuery show/hide function on click outside the div
问题描述
I am using the jQuery function 
我正在使用jQuery函数
function ShowHide(){
$(".login").animate({"height": "toggle"}, { duration: 1000 });
}
and the link to show hide the .login div is: 显示隐藏.login div的链接是：
onclick="ShowHide(); return false;"
But this link only toggles the div to show and hide, but I want it to also hide when the user clicks off the div, I have a page wrapper in place but just need some help with jQuery. 但是此链接仅切换div以显示和隐藏，但是我希望在用户单击div时也将其隐藏，我有一个页面包装器，但只需要jQuery的帮助。
3 个解决方案
解决方案1
2 2009-10-25 14:49:34
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style>
.login-div { width: 100px; height: 100px; margin:auto; border: solid 1px black; position: relative; background-color: #aeaeae; display:none;}
.parent-div { width: 300px; height: 300px; margin:auto; border: solid 1px #aeaeae; position: relative;}
.footer { margin-bottom: 0px; margin-top:auto; margin-left:auto; margin-right:auto; height:40px; width:200px; position:relative; display:none;}
</style>
<script>
$(window).load(function(){
var DEBUG = 0;
var count = 0;
$('.parent-div').bind('click', function(e){
e.preventDefault();
e.stopPropagation();
DEBUG==1?console.log('Target: '+$(e.target).attr('class')):'';
DEBUG==1?console.log('Show Hide: '+(count++)):'';
//ShowHide();
var target_class = $(e.target).attr('class');
if(target_class == 'link'){
$(".login-div").animate({"height": "toggle"}, { duration: 1000 });
$('.footer').toggle();
}
else{
$(".login-div").animate({"height": "hide"}, { duration: 1000 });
$('.footer').hide();
}
});
});
</script>
</head>
<body>
<div class="parent-div">Parent Box:<br/>
<a href="#" class="link">ShowHide</a>
<div class="login-div">Child Box:</div>
<div class="footer">click out side the gray box & inside the Parent-box
</div>
</body>
</html>
I rigged up the above based on my understanding of your requirement, check out the code. 我根据对您的要求的理解装配了以上内容，请查看代码。 this should do your job. 这应该做你的工作。 Here I am using "click" event bubbling in java script and have a event listener bound to parent-div class element. 在这里，我在Java脚本中使用“冒泡”事件冒泡，并将事件侦听器绑定到parent-div类元素。 this same can be attached to <body/> if the scope of elements is to be increased. 如果要扩大元素的范围，可以在<body/>上附加相同的内容。
解决方案2
1 2009-10-25 10:52:25
you need to put event on body element to hide it, if you want user clicking anywhere else to hide it. 如果您希望用户单击其他任何地方以隐藏它，则需要在body元素上放置事件以将其隐藏。
ps: please, do not use onclick in the html elements! ps：请不要在html元素中使用onclick！ - use event manager in jquery for that (eg sth. in the lines of addevent (click, function) ) -为此，请在jquery中使用事件管理器（例如，在addevent（单击，函数）行中）
解决方案3
0 2012-02-21 23:45:13
EVEN EASIER
Rather than establish a specific div to click on to hide the element, you can simply establish all elements that are not part of the "show me" element to hide when clicked on. 无需建立特定的div来单击以隐藏该元素，而是可以简单地建立所有不包含在单击时要隐藏的“显示给我”元素中的元素。
Example of what I mean, in your javascript section, under your ready code place the following: 在您的javascript部分中，在您准备好的代码下放置以下内容的意思是：
$("body *").not('.login, .login *').fadeOut(1000);
// This tells jquery to get all elements, in the body, not containing the
// class login or any subelement of it
// The fade out is just a simple jquery hide animation set to 1 second in this
// example but you can hide it however you want
and see how it works out for ya. 并查看结果如何。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.