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();
});

希望本文所述对大家jQuery程序设计有所帮助。

基于jquery实现鼠标左右拖动滑块滑动附源码下载
在没步入正文之前,先给大家贴效果图,看看是不是您想要的效果:在线演示源码下载基于jQuery移动端滑块拖动设置代码。这是一款支持手机移动端的

JQuery实现的按钮倒计时效果
本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考,具体如下:一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可

JQuery实现Ajax加载图片的方法
本文实例讲述了JQuery实现Ajax加载图片的方法。分享给大家供大家参考,具体如下:最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览。最先想到