JQuery實(shí)現(xiàn)點(diǎn)擊div以外的位置隱藏該div窗口
更新時(shí)間：2013年09月13日 17:42:46 作者：
鼠標(biāo)點(diǎn)擊div外的地方讓div窗口隱藏消失，實(shí)現(xiàn)方法有很多，在本文將為大家介紹下jquery中時(shí)如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)了哈
jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊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>網(wǎng)頁(yè)特效展示中心</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>
點(diǎn)擊空白的地方指定div 隱藏消失了
</body>
</html>
class="bigPic"的div是被顯示或隱藏的div，另外.case > ul > li是class="bigPic"的父級(jí)元素
$("body").bind("click",function(evt){
if($(evt.target).parents(".case > ul > li").length==0)
{
$('.bigPic').hide();
}
});
復(fù)制代碼 代碼如下:
<!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>網(wǎng)頁(yè)特效展示中心</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>
點(diǎn)擊空白的地方指定div 隱藏消失了
</body>
</html>
復(fù)制代碼 代碼如下:
class="bigPic"的div是被顯示或隱藏的div，另外.case > ul > li是class="bigPic"的父級(jí)元素
$("body").bind("click",function(evt){
if($(evt.target).parents(".case > ul > li").length==0)
{
$('.bigPic').hide();
}
});
您可能感興趣的文章:
相關(guān)文章
jquery實(shí)現(xiàn)表格行拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
瀏覽各大網(wǎng)站，很多都少不了輪播效果，如何控制這些圖片在一個(gè)方向上連續(xù)的滾動(dòng)？這篇文章就為為大家詳細(xì)介紹了jQuery插件實(shí)現(xiàn)圖片輪播特效的代碼，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了jQuery彈出層插件popShow用法,結(jié)合實(shí)例形式分析了jQuery彈出層插件popShow的具體功能、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01
jquery.validate提示錯(cuò)誤信息位置方法
這篇文章主要介紹了jquery.validate提示錯(cuò)誤信息位置方法,實(shí)例分析了jquery.validate實(shí)現(xiàn)提示錯(cuò)誤信息位置的相關(guān)技巧,需要的朋友可以參考下2016-01-01
jquery.Callbacks的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹的是jQuery.Callback()的實(shí)現(xiàn),這個(gè)函數(shù)常見(jiàn)的應(yīng)用場(chǎng)景是事件觸發(fā)機(jī)制，也就是設(shè)計(jì)模式中的觀察者（發(fā)布、訂閱機(jī)制），目前Callbacks對(duì)象用于queue、ajax、Deferred對(duì)象中，下面通過(guò)這篇文章來(lái)詳細(xì)看看關(guān)于jquery.Callbacks實(shí)現(xiàn)的介紹吧。2016-11-11
Jquery ajax執(zhí)行順序 返回自定義錯(cuò)誤信息(實(shí)例講解)
由于Jquery中的Ajax的async默認(rèn)是true(異步請(qǐng)求),如果想一個(gè)Ajax執(zhí)行完后再執(zhí)行另一個(gè)Ajax, 需要把a(bǔ)sync=false就可以了2013-11-11
在jquery中combobox多選的不兼容問(wèn)題總結(jié)
最近在IE10中開(kāi)發(fā)jquery，關(guān)于jquery中combobox多選不能兼容的問(wèn)題，進(jìn)行一些總結(jié)，感興趣的朋友可以了解下2013-12-12
jQuery實(shí)現(xiàn)獲取選中復(fù)選框的值實(shí)例詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取選中復(fù)選框的值，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
EasyUI實(shí)現(xiàn)二級(jí)頁(yè)面的內(nèi)容勾選的方法
在使用EasyUI的時(shí)候，我們經(jīng)?；赜龅皆诙?jí)頁(yè)面進(jìn)行勾選的時(shí)候，這里給大家分享一個(gè)比較簡(jiǎn)單實(shí)用的實(shí)現(xiàn)方法，希望大家能夠喜歡。2015-03-03
這篇文章主要介紹了簡(jiǎn)述Jquery與DOM對(duì)象的相關(guān)資料,十分的簡(jiǎn)單實(shí)用，需要的朋友可以參考下2015-07-07