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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
谈谈IntersectionObserver懒加载的具体使用
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的FTP学习(四)
2006/10/09 PHP
利用PHP动态生成VRML网页
2006/10/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
小程序实现录音功能
2020/09/22 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
大学生自荐信
2013/12/11 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
技校毕业生自荐信
2014/06/03 职场文书
车贷收入证明范本
2014/09/14 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
五一放假通知怎么写
2015/08/18 职场文书
导游词之山东八大关
2019/12/18 职场文书
德劲DE1108畅想
2021/04/22 无线电