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 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 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
中英文字符串翻转函数
2008/12/09 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python实现括号匹配的思路详解
2018/08/23 Python
用Python读取几十万行文本数据
2018/12/24 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python 里最强的地图绘制神器
2021/03/01 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
超市中秋节促销方案
2014/03/21 职场文书
异地年检委托书范本
2014/09/24 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS