快捷導(dǎo)航

js點(diǎn)擊頁(yè)面其它地方將某個(gè)顯示的DIV隱藏

更新時(shí)間：2012年07月12日 17:14:18 作者：

今天一朋友問(wèn)我點(diǎn)擊一按鈕彈出一個(gè)DIV，然后要求點(diǎn)擊頁(yè)面其它地方隱藏這個(gè)DIV

實(shí)現(xiàn)也很簡(jiǎn)單，但需要注意的是，在點(diǎn)擊顯示的事件中，需要做阻止事件冒泡的處理，否則就觸發(fā)頁(yè)面的點(diǎn)擊事件了。但這樣做也有一個(gè)缺點(diǎn)，即如果同一個(gè)頁(yè)面中如果也有事件阻止冒泡，則不能隱藏DIV，所以在這樣的事件中需要特殊處理下：自己調(diào)用隱藏下DIV（但正常來(lái)說(shuō)這樣的事件并不多）；
JS:

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
//語(yǔ)言頭部的點(diǎn)擊事件，顯示語(yǔ)言列表 
$(".language_selected").click(function(e) { 
$(".language_list").toggle(); 
e.stopPropagation(); //阻止事件冒泡，否則事件會(huì)冒泡到下面的文檔點(diǎn)擊事件 
}); 
//點(diǎn)擊文檔時(shí)，隱藏語(yǔ)言列表 
$(document).click(function() { 
$(".language_list").hide(); 
}); 
//點(diǎn)擊語(yǔ)言列表中的語(yǔ)言項(xiàng)時(shí)，更新選中項(xiàng)，并隱藏語(yǔ)言列表 
$(".language_list li").click(function() { 
$(".language_selected").text($(this).text()); 
$(".language_list").hide(); 
}); 
$("#noPopEvent").click(function(e) { 
e.stopPropagation(); 
}); 
}); 

CSS:

復(fù)制代碼代碼如下:

 
.language_selected 
{ 
cursor: pointer; 
} 
.language_list 
{ 
border: 1px solid black; 
display: none; 
} 
.language_list li 
{ 
cursor: pointer; 
border: 1px solid red; 
} 

HTML:

復(fù)制代碼代碼如下:

 
<div style="width: 200px"> 
<div class="language_selected"> 
中文(簡(jiǎn)體)</div> 
<div class="language_list"> 
<ul> 
<li>中文(簡(jiǎn)體)</li> 
<li>English</li> 
</ul> 
</div> 
</div> 
<div id="noPopEvent" style="width: 100px; height: 100px; border: 1px solid black;"> 
點(diǎn)擊我，不隱藏語(yǔ)言列表,需要自己顯示DIV 
</div> 

您可能感興趣的文章:

點(diǎn)擊頁(yè)面

相關(guān)文章

在微信小程序中使用vant的方法
這篇文章主要介紹了在微信小程序中使用vant的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
iScroll.js 使用方法參考
以下這篇文章是iScroll.js官網(wǎng)的中文翻譯，盡管自己英文不好，但覺(jué)得原作者們翻譯的這個(gè)資料還是可以的，基本用法介紹清楚了。如果你英文比較好的話，可以看看官網(wǎng)的資料
2016-05-05
JavaScript實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作實(shí)例詳解
這篇文章主要介紹了js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作,結(jié)合實(shí)例形式分析了哈希表的原理、哈希鍵值對(duì)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
JavaScript面向?qū)ο笾叽蠡驹瓌t實(shí)例詳解
這篇文章主要介紹了JavaScript面向?qū)ο笾叽蠡驹瓌t,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο笃叽蠡驹瓌t,包括單一職責(zé)、開(kāi)閉原則、里氏替換、依賴倒置、接口隔離、迪米特法則及組合/聚合復(fù)用原則,需要的朋友可以參考下
2020-05-05
跟我學(xué)習(xí)javascript的閉包
跟我學(xué)習(xí)javascript的閉包，這篇文章的目的就是讓大家對(duì)javascript閉包有一個(gè)非常全面的了解，感興趣的小伙伴們可以參考一下。
2015-11-11
JS彈出可拖拽可關(guān)閉的div層完整實(shí)例
這篇文章主要介紹了JS彈出可拖拽可關(guān)閉的div層完整實(shí)現(xiàn)方法,包括對(duì)div彈出層的樣式及功能的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
本篇文章主要介紹了原生JS+Canvas實(shí)現(xiàn)五子棋游戲?qū)嵗【幱X(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06