JQuery实现点击div以外的位置隐藏该div窗口


Posted in Javascript onSeptember 13, 2013

jquery实现鼠标点击div外的地方div窗口隐藏消失的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>网页特效展示中心</title> 
<style type="text/css"> 
.pop { width:200px; height:130px; background:#080;} 
</style> 
</head> <body> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(document).bind("click",function(e){ 
var target = $(e.target); 
if(target.closest(".pop").length == 0){ 
$(".pop").hide(); 
} 
}) 
}) 
</script> 
<div class="pop"></div> 
点击空白的地方指定div 隐藏消失了 
</body> 
</html>

class="bigPic"的div是被显示或隐藏的div,另外.case > ul > li是class="bigPic"的父级元素 $("body").bind("click",function(evt){ 
if($(evt.target).parents(".case > ul > li").length==0) 
{ 
$('.bigPic').hide(); 
} 
});
Javascript 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
详解Vue源码学习之双向绑定
Apr 10 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 #Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 #Javascript
javascript常用对话框小集
Sep 13 #Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 #Javascript
jquery easyui滚动条部分设置介绍
Sep 12 #Javascript
jquery实现盒子下拉效果示例代码
Sep 12 #Javascript
利用jquery包将字符串生成二维码图片
Sep 12 #Javascript
You might like
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
深入密码加salt原理的分析
2013/06/06 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP使用函数用法详解
2018/09/30 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
javascript实现连续赋值
2015/08/10 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python读取Excel的方法实例分析
2015/07/11 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
考核工作实施方案
2014/03/30 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
专项法律服务方案
2014/06/11 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
活动总结范文
2014/08/30 职场文书
殡葬服务心得体会
2014/09/11 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书