jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法。分享给大家供大家参考,具体如下:
为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了。
以下图为例的一个下拉菜单为参考:
效果实现源码:
$(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点,防止点击的是div子元素 if (elem.id && elem.id == 'menu') { return; } elem = elem.parentNode; } //点击的不是div或其子元素 $('.menuList,.overlay').hide(); });
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
cbao 2019-12-29
浪味仙 2019-12-24
Hhjian 2014-05-31
人心 2012-02-05
zhanghao 2016-11-24
攻城师 2019-06-28
asdjkl 2017-05-18
csscode 2016-09-13
海欣海夜 2015-06-29
最近用phonegap在安卓手机中使用Html5+css3做页面,<a name="yes" data-role="button" style="display: block;font-size:16
ruanjianxiong 2014-08-17
83540198 2014-08-01
DevilPace 2014-05-31
Kindlecode 2012-10-27
83510998 2012-04-28
89203856 2012-04-17
83453065 2012-03-14
AnyBisks 2012-02-23
yyzhu 2011-09-27