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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 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
ThinkPHP之import方法实例详解
2014/06/20 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP反射实际应用示例
2019/04/03 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python中下划线的使用方法
2015/03/27 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python类的继承用法示例
2019/01/31 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python如何输出百分比
2020/07/31 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
匡威英国官网:Converse英国
2018/12/02 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
素质拓展感言
2014/01/29 职场文书
校园活动宣传方案
2014/03/28 职场文书
小学生作文评语
2014/04/18 职场文书
软环境建设心得体会
2014/09/09 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
vue+springboot实现登录验证码
2021/05/27 Vue.js