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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
改版了网上的一个js操作userdata
Apr 27 Javascript
慎用 somefunction.prototype 分析
Jun 02 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JS实现九宫格拼图游戏
Jun 28 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中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
短信提示使用 特效
2007/01/19 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python实现中文输出的两种方法
2015/05/09 Python
python实现淘宝秒杀脚本
2020/06/23 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
《走一步再走一步》教学反思
2014/02/15 职场文书
视光学专业自荐信
2014/06/24 职场文书
承诺书样本
2014/08/30 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书