脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js点击任意区域弹出层消失

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

 更新时间：2016年12月27日 14:22:03   作者：表白了  
这篇文章主要为大家详细介绍了js点击任意区域弹出层消失实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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实现单击输入框弹出选择框效果完整实例

    JS实现单击输入框弹出选择框效果完整实例

    这篇文章主要介绍了JS实现单击输入框弹出选择框效果的方法,涉及JavaScript响应鼠标事件动态操作页面元素与相关属性的实现技巧,需要的朋友可以参考下
    2015-12-12
  • 学习jQuey中的return false

    学习jQuey中的return false

    这篇文章主要介绍了jQuey中的return false作用，以及解决jquery中的return false不起作用的方法，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • ES6 Promise.race的用法详解

    ES6 Promise.race的用法详解

    本文主要介绍了ES6 Promise.race的用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • 对JavaScript的eval()中使用函数的进一步讨论

    对JavaScript的eval()中使用函数的进一步讨论

    《JavaScript语言精髓与编程实践》的读者I22141提出了一问题：为什么下面这段代码在JScript 和SpiderMonkey中表现不一样：
    2008-07-07
  • js定时器的使用(实例讲解)

    js定时器的使用(实例讲解)

    本篇文章主要介绍了js中定时器的使用方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JavaScript中函数的四种调用方式总结

    JavaScript中函数的四种调用方式总结

    这篇文章主要为大家详细介绍了JavaScript中函数的四种调用方式,文中的示例代码讲解详细,对我们深入掌握JavaScript有一定的帮助,需要的可以参考下
    2023-10-10
  • JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

    这篇文章主要介绍了JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件的相关资料,需要的朋友可以参考下
    2016-10-10
  • JavaScript学习笔记之函数记忆

    JavaScript学习笔记之函数记忆

    这篇文章主要介绍了JavaScript学习笔记之函数记忆，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js窗口关闭提示信息（兼容IE和firefox）

    js窗口关闭提示信息（兼容IE和firefox）

    这篇文章主要介绍了当关闭窗口的时候，显示窗口提示信息，友好的进行提示，防止丢失重要信息，需要的朋友可以参考一下
    2015-10-10
  • 利用jsonp解决js读取本地json跨域的问题

    利用jsonp解决js读取本地json跨域的问题

    这篇文章主要给大家介绍了关于利用jsonp解决js读取本地json跨域的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论