编程 Javascript

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中showModalDialog 的使用解析

Apr 17 Javascript

jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

Apr 10 Javascript

JS实现选择TextArea内文本的方法

Aug 03 Javascript

javascript实现加载xml文件的方法

Nov 24 Javascript

浅析AngularJS中的指令

Mar 20 Javascript

如何使用jquery修改css中带有!important的样式属性

Apr 28 Javascript

教你用十行node.js代码读取docx的文本

Mar 08 Javascript

JS获取短信验证码倒计时的实现代码

May 22 Javascript

Scala解析Json字符串的实例详解

Oct 11 Javascript

ES6与CommonJS中的模块处理的区别

Jun 13 Javascript

vue中根据时间戳判断对应的时间(今天昨天前天)

Dec 20 Javascript

JavaScript仿京东轮播图效果

Feb 25 Javascript

javascript仿php的print_r函数输出json数据

Sep 13 #Javascript

js调用图片隐藏&显示实现代码

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