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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
JavaScript实现区块链
Mar 14 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 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
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
JS中的作用域链
2017/03/01 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python常用模块介绍
2014/11/21 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
python的turtle库使用详解
2019/05/10 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
工程管理英文求职信
2014/03/18 职场文书
文员岗位职责范本
2015/04/16 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
Python中字符串对象语法分享
2022/02/24 Python