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