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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 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实现小型站点广告管理(修正版)
2006/10/09 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python自动翻译实现方法
2016/05/28 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
信息管理专业推荐信
2013/10/29 职场文书
好人好事事迹材料
2014/02/12 职场文书
生物科学专业自荐书
2014/06/20 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
投诉书格式范本
2015/07/02 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python