基于jquery点击自以外任意处，关闭自身的代码
更新时间：2012年02月10日 17:29:16 作者：
主要功能是点击显示，然后通过点击页面的任意位置都能关闭显示效果，主要是$(document).click的作用
Html:
<div class="down">click</div>
<div class="con hide">show-area</div>
CSS:
.hide{display:none;}
js:
$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});
复制代码 代码如下:
<div class="down">click</div>
<div class="con hide">show-area</div>
CSS:
复制代码 代码如下:
.hide{display:none;}
js:
复制代码 代码如下:
$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});
相关文章
jquery text,radio,checkbox,select操作实现代码
学习jquery的朋友看参考下，对form等文本框的一些控制实现代码。2009-07-07
这篇文章主要介绍了jQuery控制frames及frame页面JS的方法,涉及jQuery针对页面元素的判定及frame框架的操作技巧,需要的朋友可以参考下2016-03-03
本篇文章只要是对jquery 图片缩放拖动的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
这篇文章主要介绍了jQuery动态添加及删除表单上传元素的方法,涉及jQuery的事件动态绑定及页面元素动态操作技巧,并附带了demo源码供读者下载参考,代码非常简洁实用,需要的朋友可以参考下2016-01-01
dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，在说出解决方案前先来普及一下jquery关于定位的几个方法2013-09-09
查找iframe里面的元素在项目里用的还是比较多的，下面为大家介绍个方法可传参，感兴趣的朋友可以参考下2013-09-09
这篇文章主要介绍了jQuery实现带动画效果的二级下拉导航方法,涉及jQuery操作css样式及鼠标事件的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery表单域属性过滤器用法,实例分析了:checked、:enabled、:disabled:、selected等常用表单域属性过滤器使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery取得iframe中元素的常用方法,结合实例形式详细分析了jQuery针对iframe中元素获取技巧及注意事项,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了jquery插件实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论