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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
JavaScript中的闭包
Feb 24 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
有关php运算符的知识大全
2011/11/03 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php跨站攻击实例分析
2014/10/28 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
python 设置输出图像的像素大小方法
2019/07/04 Python
详解Python文件修改的两种方式
2019/08/22 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
结婚主持人致辞
2015/07/28 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android