JQuery实现点击div以外的位置隐藏该div窗口
更新时间：2013年09月13日 17:42:46 作者：
鼠标点击div外的地方让div窗口隐藏消失，实现方法有很多，在本文将为大家介绍下jquery中时如何实现的，感兴趣的朋友不要错过了哈
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();
}
});
复制代码 代码如下:
<!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();
}
});
相关文章
这篇文章主要为大家详细介绍了jquery实现表格行拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
浏览各大网站，很多都少不了轮播效果，如何控制这些图片在一个方向上连续的滚动？这篇文章就为为大家详细介绍了jQuery插件实现图片轮播特效的代码，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了jQuery弹出层插件popShow用法,结合实例形式分析了jQuery弹出层插件popShow的具体功能、用法与相关注意事项,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了jquery.validate提示错误信息位置方法,实例分析了jquery.validate实现提示错误信息位置的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要给大家介绍的是jQuery.Callback()的实现,这个函数常见的应用场景是事件触发机制，也就是设计模式中的观察者（发布、订阅机制），目前Callbacks对象用于queue、ajax、Deferred对象中，下面通过这篇文章来详细看看关于jquery.Callbacks实现的介绍吧。2016-11-11
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
由于Jquery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false就可以了2013-11-11
最近在IE10中开发jquery，关于jquery中combobox多选不能兼容的问题，进行一些总结，感兴趣的朋友可以了解下2013-12-12
这篇文章主要介绍了jQuery实现获取选中复选框的值，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
在使用EasyUI的时候，我们经常回遇到在二级页面进行勾选的时候，这里给大家分享一个比较简单实用的实现方法，希望大家能够喜欢。2015-03-03
这篇文章主要介绍了简述Jquery与DOM对象的相关资料,十分的简单实用，需要的朋友可以参考下2015-07-07
最新评论