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和js分別可以實現(xiàn)對div的隱藏和顯示，方法也不一樣，jquery的show、show;js的hidden、visible2014-09-09
jQuery.cookie.js是個很好的cookie插件，大概的使用方法如下，需要的朋友可以參考下。2011-01-01
詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細介紹了Bootstrap的iCheck插件checkbox和radio的知識及bootstrap icheck獲取radio的value值的方法，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
因為垃圾回收的存在，讓javascript等高級語言開發(fā)者產(chǎn)生了一個錯誤的認識，以為可以不用關心內存管理,需要的朋友可以了解下2012-12-12
jQuery實現(xiàn)Div拖動+鍵盤控制綜合效果的方法
這篇文章主要介紹了jQuery實現(xiàn)Div拖動+鍵盤控制綜合效果的方法,實例分析了jQuery操作div塊拖動的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
本文主要是講解和學習jQuery的自動顯隱，漸入漸出、飛入飛出、自定義動畫等。非常詳細，這里推薦給有需要的小伙伴。2015-02-02
通過這篇文章你可以得到以下收獲JQUERY操作JSON的一些實現(xiàn)方法。2010-02-02
這篇文章主要介紹了jQuery實現(xiàn)的淡入淡出與滑入滑出效果,結合實例形式分析了jQuery中fadeIn、fadeOut、slideDown及slideUp方法相關使用技巧,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了Jquery Easyui自定義下拉框組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了jQuery實現(xiàn)的簡單提示信息插件,涉及jQuery插件擴展的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12