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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
Three.js基础部分学习
Jan 08 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php计算十二星座的函数代码
2012/08/21 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
python中的装饰器详解
2015/04/13 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python断言assert的用法代码解析
2018/02/03 Python
Python中按键来获取指定的值
2019/03/02 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python 回溯法模板详解
2020/02/26 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
银行类自荐信
2014/02/04 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
MySQL创建高性能索引的全步骤
2021/05/02 MySQL