前端开发

 首页 > 前端开发 > nodejs > jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

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

分享到:
【字体:
导读:
         [导读] 本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法。分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要...

本文实例讲述了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();
});


分享到:
node.js入门实例helloworld详解
本文实例讲述了node.js入门实例helloworld。分享给大家供大家参考,具体如下: 将下面的代码保存为:server.js存到E盘下面的node目录中。 var http = require('http'); function myNode(request, response){   response.writeHead(200, {'Content-type':'text/plain'});   res...
jade模板引擎使用教程选项标签标签文本注...
.artNav li{ margin-right:5px; } .artNav li ul{ margin-left:15px;} .artNav a{ color:#008200} 导航: 试玩 特性 其它实现 安装 浏览器支持 API 选项 标签 标签文本 注释 块注释 内联 块展开 Case 属性 HTML Doctypes 过滤器 代码 循环 条件语句 模板继承 前置、追加代码块 包含 Mixins 产生输出 Makefile 的一个例...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……