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


Posted in Javascript onDecember 27, 2016

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 #Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 #Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 #Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 #Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 #Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 #Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 #Javascript
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
python+django加载静态网页模板解析
2017/12/12 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python安装及变量名介绍详解
2020/12/12 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
考试不及格检讨书
2014/01/09 职场文书
网络技术专业求职信
2014/07/13 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
会计实训报告范文
2014/11/04 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
开国大典观后感
2015/06/04 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python