jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
更新时间：2015年12月23日 12:53:27 作者：views
这篇文章主要介绍了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法,涉及jQuery响应鼠标事件动态改变页面元素样式的功能,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
jquery和js分别可以实现对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等高级语言开发者产生了一个错误的认识，以为可以不用关心内存管理,需要的朋友可以了解下2012-12-12
这篇文章主要介绍了jQuery实现Div拖动+键盘控制综合效果的方法,实例分析了jQuery操作div块拖动的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本文主要是讲解和学习jQuery的自动显隐，渐入渐出、飞入飞出、自定义动画等。非常详细，这里推荐给有需要的小伙伴。2015-02-02
通过这篇文章你可以得到以下收获JQUERY操作JSON的一些实现方法。2010-02-02
这篇文章主要介绍了jQuery实现的淡入淡出与滑入滑出效果,结合实例形式分析了jQuery中fadeIn、fadeOut、slideDown及slideUp方法相关使用技巧,需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了Jquery Easyui自定义下拉框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jQuery实现的简单提示信息插件,涉及jQuery插件扩展的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
最新评论