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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
Node.js的特点详解
Feb 03 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
javascript实现一款好看的秒表计时器
Sep 05 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基础陷阱题(变量赋值)
2012/09/12 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
小程序实现搜索框
2020/06/19 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python pytest进阶之fixture详解
2019/06/27 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
np.dot()函数的用法详解
2020/01/17 Python
python导入库的具体方法
2020/06/18 Python
python matplotlib库的基本使用
2020/09/23 Python
Python高并发和多线程有什么关系
2020/11/14 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
销售会计工作职责
2013/12/02 职场文书
员工薪酬福利制度
2014/01/17 职场文书
大学生团员个人总结
2015/02/14 职场文书
家长反馈意见及建议
2015/06/03 职场文书
国富论读书笔记
2015/06/26 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
golang内置函数len的小技巧
2021/07/25 Golang
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers