jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
本文實(shí)例講述了jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法。分享給大家供大家參考,具體如下:
為了更好的用戶體驗(yàn),在做下拉獲取其他有彈出層的時(shí)候,當(dāng)展開(kāi)下拉時(shí),要做到點(diǎn)擊其他區(qū)域也能自動(dòng)隱藏收起下拉和遮罩層,這樣的效果用一段js就可以了。
以下圖為例的一個(gè)下拉菜單為參考:
效果實(shí)現(xiàn)源碼:
$(document).bind('click', function(e) { var e = e || window.event; //瀏覽器兼容性 var elem = e.target || e.srcElement; while (elem) { //循環(huán)判斷至跟節(jié)點(diǎn),防止點(diǎn)擊的是div子元素 if (elem.id && elem.id == 'menu') { return; } elem = elem.parentNode; } //點(diǎn)擊的不是div或其子元素 $('.menuList,.overlay').hide(); });
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
- jQuery操作dom實(shí)現(xiàn)彈出頁(yè)面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jQuery阻止移動(dòng)端遮罩層后頁(yè)面滾動(dòng)
- Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)
- jquery實(shí)現(xiàn)簡(jiǎn)單的遮罩層
- jquery下實(shí)現(xiàn)overlay遮罩層代碼
- jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
- jQuery遮罩層實(shí)現(xiàn)方法實(shí)例詳解(附遮罩層插件)
- 輕量級(jí)網(wǎng)頁(yè)遮罩層jQuery插件用法實(shí)例
- jQuery實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能示例
- jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例
相關(guān)文章
jQuery CSS()方法改變現(xiàn)有的CSS樣式
css()方法在使用上具有多樣性。其中有一種可接受兩個(gè)輸入?yún)?shù):樣式屬性和樣式值,兩者之間用逗號(hào)分隔,下面通過(guò)實(shí)例為大家介紹下2014-08-08jquery正則表達(dá)式驗(yàn)證(手機(jī)號(hào)、身份證號(hào)、中文名稱)
這篇文章主要介紹了jquery正則表達(dá)式驗(yàn)證,實(shí)現(xiàn)手機(jī)號(hào)、身份證號(hào)、中文名稱驗(yàn)證,感興趣的小伙伴們可以參考一下2015-12-12jquery實(shí)現(xiàn)select選中行、列合計(jì)示例
這篇文章主要介紹了jquery如何實(shí)現(xiàn)select選中行、列合計(jì)示例 ,需要的朋友可以參考下2014-04-04DIV外區(qū)域Click后關(guān)閉DIV的實(shí)現(xiàn)代碼
首先看下JS的事件模型,JS事件模型為向上冒泡,如onclick事件在某一DOM元素被觸發(fā)后,事件將跟隨節(jié)點(diǎn)向上傳播,直到有click事件綁定在某一父節(jié)點(diǎn)上,如果沒(méi)有將直至文檔的根2011-12-12easyUI 實(shí)現(xiàn)的后臺(tái)分頁(yè)與前臺(tái)顯示功能示例
這篇文章主要介紹了easyUI 實(shí)現(xiàn)的后臺(tái)分頁(yè)與前臺(tái)顯示功能,結(jié)合實(shí)例形式分析了easyUI 后臺(tái)數(shù)據(jù)交互、分頁(yè)與前臺(tái)顯示相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-06-06