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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP中Array相关函数简介
2016/07/03 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue filters的使用详解
2018/06/11 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
python怎么删除缓存文件
2020/07/19 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python Timer 类使用介绍
2020/12/28 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
计算机网络专业求职信
2014/06/05 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
Python内置的数据类型及使用方法
2022/04/13 Python
golang定时器
2022/04/14 Golang