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的版本实现执行不同的代码
May 11 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
php object转数组示例
2014/01/15 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python剪切视频与合并视频的实现
2020/03/03 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python调用百度API实现人脸识别
2020/11/17 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
大学生旅游业创业计划书
2014/01/29 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
让生命充满爱观后感
2015/06/08 职场文书