js点击任意区域弹出层消失实现代码

2019-11-19 18:14:24

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js点击任意区域弹出层消失的具体代码，供大家参考，具体内容如下

采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面，否则让弹出层消失。

完整代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><pre> parent > child 在给定的父元素下匹配所有的子元素</pre><div class="help"> <span class="bnt">我是弹出层</span> <ul id="list" class="foo">  <li><a href="#">第1条记录</a></li>  <li><a href="#">第2条记录</a></li>  <li><a href="#">第3条记录</a></li>  <li><a href="#">第4条记录</a></li> </ul></div><style> .bnt{  width: 100px;height: 50px;background: #777;color: #fff;  display: block;  text-align: center;  line-height: 50px;  cursor: default; } .help ul{  display: none;  border: 1px solid #aaa; } a{display: block;padding: 10px;}</style><script src="../jquery.js"></script><script> (function ($) {  $('.bnt').click(function(){   if($(this).hasClass('show')){    $('.help ul').hide();    $(this).removeClass('show')    return ;   }   $('.help ul').show();   $(this).addClass('show')  })  document.addEventListener('click',function (e) {   var parent=$(e.target).parents('.foo,.help');   if(parent.length===0){    console.log('不在弹层与按钮区')    //操作此区域    $('.help ul').hide();    $('.bnt').removeClass('show');   }else{    console.log('按钮与弹层区')   }  }) })(jQuery);</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS正则表达式修饰符global(/g)用法分析

下一篇：JS正则表达式修饰符中multiline(/m)用法分析