jquery實現(xiàn)點擊其他區(qū)域時隱藏下拉div和遮罩層的方法
更新時間:2015年12月23日 12:53:27 作者:views
這篇文章主要介紹了jquery實現(xiàn)點擊其他區(qū)域時隱藏下拉div和遮罩層的方法,涉及jQuery響應鼠標事件動態(tài)改變頁面元素樣式的功能,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)點擊其他區(qū)域時隱藏下拉div和遮罩層的方法。分享給大家供大家參考,具體如下:
為了更好的用戶體驗,在做下拉獲取其他有彈出層的時候,當展開下拉時,要做到點擊其他區(qū)域也能自動隱藏收起下拉和遮罩層,這樣的效果用一段js就可以了。
以下圖為例的一個下拉菜單為參考:
效果實現(xiàn)源碼:
$(document).bind('click', function(e) { var e = e || window.event; //瀏覽器兼容性 var elem = e.target || e.srcElement; while (elem) { //循環(huán)判斷至跟節(jié)點,防止點擊的是div子元素 if (elem.id && elem.id == 'menu') { return; } elem = elem.parentNode; } //點擊的不是div或其子元素 $('.menuList,.overlay').hide(); });
希望本文所述對大家jQuery程序設計有所幫助。
您可能感興趣的文章:
- JQuery 遮罩層實現(xiàn)(mask)實現(xiàn)代碼
- jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jQuery阻止移動端遮罩層后頁面滾動
- Jquery實現(xiàn)遮罩層的簡單實例(就是彈出DIV周圍都灰色不能操作)
- jquery實現(xiàn)簡單的遮罩層
- jquery下實現(xiàn)overlay遮罩層代碼
- jQuery實現(xiàn)彈出帶遮罩層的居中浮動窗口效果
- jQuery遮罩層實現(xiàn)方法實例詳解(附遮罩層插件)
- 輕量級網(wǎng)頁遮罩層jQuery插件用法實例
- jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能示例
- jQuery超簡單遮罩層實現(xiàn)方法示例
相關文章
jQuery CSS()方法改變現(xiàn)有的CSS樣式
css()方法在使用上具有多樣性。其中有一種可接受兩個輸入?yún)?shù):樣式屬性和樣式值,兩者之間用逗號分隔,下面通過實例為大家介紹下2014-08-08DIV外區(qū)域Click后關閉DIV的實現(xiàn)代碼
首先看下JS的事件模型,JS事件模型為向上冒泡,如onclick事件在某一DOM元素被觸發(fā)后,事件將跟隨節(jié)點向上傳播,直到有click事件綁定在某一父節(jié)點上,如果沒有將直至文檔的根2011-12-12