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 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
node.js中path路径模块的使用方法实例分析
Feb 13 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实现的大文件切割与合并功能示例
2018/04/10 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
简单实现python数独游戏
2018/03/30 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
django使用graphql的实例
2020/09/02 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
委托公证书样本
2015/01/23 职场文书
家长反馈意见及建议
2015/06/03 职场文书
党性修养心得体会2016
2016/01/21 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis