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

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

 
$(document).ready(function() { 
//語言頭部的點(diǎn)擊事件，顯示語言列表 
$(".language_selected").click(function(e) { 
$(".language_list").toggle(); 
e.stopPropagation(); //阻止事件冒泡，否則事件會冒泡到下面的文檔點(diǎn)擊事件 
}); 
//點(diǎn)擊文檔時，隱藏語言列表 
$(document).click(function() { 
$(".language_list").hide(); 
}); 
//點(diǎn)擊語言列表中的語言項時，更新選中項，并隱藏語言列表 
$(".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"> 
中文(簡體)</div> 
<div class="language_list"> 
<ul> 
<li>中文(簡體)</li> 
<li>English</li> 
</ul> 
</div> 
</div> 
<div id="noPopEvent" style="width: 100px; height: 100px; border: 1px solid black;"> 
點(diǎn)擊我，不隱藏語言列表,需要自己顯示DIV 
</div> 

您可能感興趣的文章:

點(diǎn)擊頁面

相關(guān)文章

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