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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
JS的反射问题
2010/04/07 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
关于Python作用域自学总结
2019/06/10 Python
python集合是否可变总结
2019/06/20 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
python实现字符串和数字拼接
2020/03/02 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
高中军训感言400字
2014/02/24 职场文书
财务经理岗位职责
2015/01/31 职场文书