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 相关文章推荐
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 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中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
Angular中支持SCSS的方法
2017/11/18 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
JS实现烟花爆炸效果
2020/03/10 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python3实现的简单验证码识别功能示例
2018/05/02 Python
对python中的pop函数和append函数详解
2018/05/04 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python基础之文件读取的讲解
2019/02/16 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
大学生年度自我鉴定
2013/10/31 职场文书
退休感言
2014/01/28 职场文书
推荐信格式范文
2014/05/09 职场文书
检讨书范文500字
2015/01/28 职场文书
音乐课外活动总结
2015/05/09 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle