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ò)過了哈
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)網(wǎng)頁(yè)跳轉(zhuǎn)或用命令打開指定網(wǎng)頁(yè)的解決方法
本篇文章是對(duì)使用Jquery實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(zhuǎn)或用命令打開指定網(wǎng)頁(yè)的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
checkbox:click事件觸發(fā)span元素內(nèi)容改變的方法
下面小編就為大家?guī)?lái)一篇checkbox:click事件觸發(fā)span元素內(nèi)容改變的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09
JQuery 常用操作代碼，學(xué)習(xí)jquery的朋友可以參考下。2010-03-03
jQuery實(shí)現(xiàn)checkbox全選、反選及刪除等操作的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox全選、反選及刪除等操作的方法,結(jié)合實(shí)例形式形式詳細(xì)分析了jQuery針對(duì)checkbox多選按鈕常見批量操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-08-08
收集的10個(gè)免費(fèi)的jQuery相冊(cè)
或許在網(wǎng)絡(luò)上你已經(jīng)見過數(shù)百種通過jQuery實(shí)現(xiàn)的相冊(cè)，但是我們發(fā)現(xiàn)的這些相冊(cè)，他們有額外的東西，優(yōu)雅和獨(dú)特的創(chuàng)意！每個(gè)相冊(cè)都是可在線預(yù)覽和免費(fèi)下載的。你可以為你的Web項(xiàng)目添加色彩。2011-02-02
jQuery 開發(fā)之EasyUI 添加數(shù)據(jù)的實(shí)例
這篇文章主要介紹了jQuery 開發(fā)之EasyUI 添加數(shù)據(jù)的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
基于jQuery實(shí)現(xiàn)表格的查看修改刪除
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)表格的查看修改刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
Jquery ui datepicker設(shè)置日期范圍，如只能隔3天【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)?lái)一篇Jquery ui datepicker 設(shè)置日期范圍，如只能隔3天【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
jQuery.Validate驗(yàn)證庫(kù)的使用介紹
本篇文章介紹了，jQuery.Validate驗(yàn)證庫(kù)的使用。需要的朋友參考下2013-04-04
JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
這篇文章主要介紹了JQuery的ready函數(shù)與JS的onload的區(qū)別，有需要的朋友可以參考一下2013-11-11