jquery实现点击其他区域时隐藏下拉div和遮罩层的方法


Posted in Javascript onDecember 23, 2015

本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法。分享给大家供大家参考,具体如下:

为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了。

以下图为例的一个下拉菜单为参考:

jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

效果实现源码:

$(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程序设计有所帮助。

Javascript 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
node.js入门实例helloworld详解
Dec 23 #Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 #Javascript
AngularJS 日期格式化详解
Dec 23 #Javascript
详解JavaScript时间格式化
Dec 23 #Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 #Javascript
js实现图片无缝滚动
Dec 23 #Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 #Javascript
You might like
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
网上抓的一个特效
2007/05/11 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
JS实现简易计算器
2020/02/14 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python中turtle作图示例
2017/11/15 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python读取各种文件数据方法解析
2018/12/29 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
浅析Python迭代器的高级用法
2020/07/16 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
普通党员个人整改措施
2014/10/27 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
网络营销计划
2015/01/17 职场文书
户外亲子活动总结
2015/05/08 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
Java 写一个简单的图书管理系统
2022/04/26 Java/Android