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 学习笔记(七)字符串的连接
Dec 31 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
Vuex模块化应用实践示例
Feb 03 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
脚本收藏iframe
2006/07/21 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python基础教程之缩进介绍
2014/08/29 Python
Python脚本实现网卡流量监控
2015/02/14 Python
Python实现线程池代码分享
2015/06/21 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python怎么调用自己的函数
2020/07/01 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
应届生污水处理求职信
2013/11/06 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
一年级小学生评语
2014/04/22 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
vue如何清除浏览器历史栈
2022/05/25 Vue.js