前端开发

 首页 > 前端开发 > 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...
学习Node.js模块机制
一、CommonJS的模块规范 Node与浏览器以及 W3C组织、CommonJS组织、ECMAScript之间的关系 Node借鉴CommonJS的Modules规范实现了一套模块系统,所以先来看看CommonJS的模块规范。 CommonJS对模块的定义十分简单,主要分为模块引用、模块定义和模块标识3个部分。 1. 模块引用 模块引用的示例代码如下: var math = require(&...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……