js點擊頁面其它地方將某個顯示的DIV隱藏
更新時間：2012年07月12日 17:14:18 作者：
今天一朋友問我 點擊一按鈕彈出一個DIV，然后要求點擊頁面其它地方隱藏這個DIV
實現(xiàn)也很簡單，但需要注意的是，在點擊顯示的事件中，需要做阻止事件冒泡的處理，否則就觸發(fā)頁面的點擊事件了。但這樣做也有一個缺點，即如果同一個頁面中如果也有事件阻止冒泡，則不能隱藏DIV，所以在這樣的事件中需要特殊處理下：自己調(diào)用隱藏下DIV（但正常來說這樣的事件并不多）；
JS:
$(document).ready(function() {
//語言頭部的點擊事件，顯示語言列表
$(".language_selected").click(function(e) {
$(".language_list").toggle();
e.stopPropagation(); //阻止事件冒泡，否則事件會冒泡到下面的文檔點擊事件
});
//點擊文檔時，隱藏語言列表
$(document).click(function() {
$(".language_list").hide();
});
//點擊語言列表中的語言項時，更新選中項，并隱藏語言列表
$(".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">
中文(簡體)</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;">
點擊我，不隱藏語言列表,需要自己顯示DIV
</div>
JS:
復(fù)制代碼 代碼如下:
$(document).ready(function() {
//語言頭部的點擊事件，顯示語言列表
$(".language_selected").click(function(e) {
$(".language_list").toggle();
e.stopPropagation(); //阻止事件冒泡，否則事件會冒泡到下面的文檔點擊事件
});
//點擊文檔時，隱藏語言列表
$(document).click(function() {
$(".language_list").hide();
});
//點擊語言列表中的語言項時，更新選中項，并隱藏語言列表
$(".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;">
點擊我，不隱藏語言列表,需要自己顯示DIV
</div>
相關(guān)文章
iframe實現(xiàn)高度自適應(yīng)小程序web-view方案
這篇文章主要為大家介紹了iframe實現(xiàn)高度自適應(yīng)小程序web-view方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
JS判斷不同分辨率調(diào)用不同的CSS樣式文件實現(xiàn)思路及測試代碼
最近看一個網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，于是很好奇研究并寫了一個,經(jīng)測試感覺還不錯，感興趣的你可以來看看哦2013-01-01
現(xiàn)在網(wǎng)上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法，累加元素offsetParent的offsetLeft和offsetTop一直到DOM的頂層。2010-01-01
這篇文章介紹了帶參數(shù)的function 的自運行效果,通過實例對比展示了帶參數(shù)與不帶參數(shù)function自運行效果,需要的朋友可以參考一下2007-12-12
這篇文章主要介紹了JavaScript點擊按鈕后彈出透明浮動層的方法,可實現(xiàn)點擊按鈕彈出居中的透明浮動層的效果,涉及javascript操作鼠標(biāo)事件及頁面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
本文給大家分享的是個人總結(jié)的10條非常常用的原生javascript的小技巧，都是平時項目中用到的，這里總結(jié)記錄下來，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了js獲取video任意時間的畫面截圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序swiper輪播圖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在移動端，側(cè)滑菜單是一個很常用的組件，本文就詳細(xì)的介紹小程序原生實現(xiàn)左滑抽屜菜單，具有一定的參考價值，感興趣的可以了解一下2021-07-07
這篇文章主要給大家介紹了關(guān)于JavaScript快速調(diào)試的兩個技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11