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中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js中settimeout方法加参数
Feb 28 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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中mysql与mysqli的区别分析
2013/06/10 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
详解Python当中的字符串和编码
2015/04/25 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
怎样声明接口
2014/09/19 面试题
小学生手册家长评语
2014/04/16 职场文书
个人简历自荐信
2014/06/26 职场文书
语文教研活动总结
2014/07/02 职场文书
法人委托书范本格式
2014/09/15 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
党建工作汇报材料
2014/12/24 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
超级详细实用的pycharm常用快捷键
2021/05/12 Python