JQuery实现点击div以外的位置隐藏该div窗口
JQuery实现点击div以外的位置隐藏该div窗口
发布时间:2016-12-30 来源:查字典编辑
摘要:jquery实现鼠标点击div外的地方div窗口隐藏消失的复制代码代码如下:网页特效展示中心.pop{width:200px;height:...

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></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教程学习
热门Javascript教程学习
编程开发子分类