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:
$(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:
.language_selected
{
cursor: pointer;
}
.language_list
{
border: 1px solid black;
display: none;
}
.language_list li
{
cursor: pointer;
border: 1px solid red;
}
HTML:
<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>
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>
相關(guān)文章
iframe實(shí)現(xiàn)高度自適應(yīng)小程序web-view方案
這篇文章主要為大家介紹了iframe實(shí)現(xiàn)高度自適應(yīng)小程序web-view方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
JS判斷不同分辨率調(diào)用不同的CSS樣式文件實(shí)現(xiàn)思路及測(cè)試代碼
最近看一個(gè)網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，于是很好奇研究并寫(xiě)了一個(gè),經(jīng)測(cè)試感覺(jué)還不錯(cuò)，感興趣的你可以來(lái)看看哦2013-01-01
現(xiàn)在網(wǎng)上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法，累加元素offsetParent的offsetLeft和offsetTop一直到DOM的頂層。2010-01-01
帶參數(shù)的function 的自運(yùn)行效果代碼
這篇文章介紹了帶參數(shù)的function 的自運(yùn)行效果,通過(guò)實(shí)例對(duì)比展示了帶參數(shù)與不帶參數(shù)function自運(yùn)行效果,需要的朋友可以參考一下2007-12-12
JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法
這篇文章主要介紹了JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕彈出居中的透明浮動(dòng)層的效果,涉及javascript操作鼠標(biāo)事件及頁(yè)面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
本文給大家分享的是個(gè)人總結(jié)的10條非常常用的原生javascript的小技巧，都是平時(shí)項(xiàng)目中用到的，這里總結(jié)記錄下來(lái)，有需要的小伙伴可以參考下。2015-04-04
詳解js獲取video任意時(shí)間的畫(huà)面截圖
這篇文章主要介紹了js獲取video任意時(shí)間的畫(huà)面截圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序swiper輪播圖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在移動(dòng)端，側(cè)滑菜單是一個(gè)很常用的組件，本文就詳細(xì)的介紹小程序原生實(shí)現(xiàn)左滑抽屜菜單，具有一定的參考價(jià)值，感興趣的可以了解一下2021-07-07
這篇文章主要給大家介紹了關(guān)于JavaScript快速調(diào)試的兩個(gè)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11