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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
js中创建对象的几种方式
Feb 05 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
一个odbc连mssql分页的类
2006/10/09 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
深入PHP FTP类的详解
2013/06/13 PHP
PHP7常量数组用法分析
2016/09/26 PHP
javascript中的原型链深入理解
2014/02/24 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
详解Python 切片语法
2019/06/10 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
股权转让意向书
2014/04/01 职场文书
我爱我校演讲稿
2014/05/21 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
鼋头渚导游词
2015/02/05 职场文书
个人党性锻炼总结
2015/03/05 职场文书
理想国读书笔记
2015/06/25 职场文书