<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>网页特效展示中心</title>

 <style type="text/css">

 #testa,#testa2{position:relative;}

 #pop,#pop2 { width:100px; height:130px; position:absolute; left:0px; top:20px; border:solid red 1px;background:white; z-index:9999;}

 </style>

 </head>

 <body>

 <script type="text/javascript" src="cxx/jquery.min.js"></script>

 <script type="text/javascript">

 function toggle(id)

 {

 var id = document.getElementById(id);

 if(id.style.display == 'none')

 {

 id.style.display = 'block'

 }

 else

 {

 id.style.display = 'none';

 }

 }

 function dealBlankDivHide(e, id ,destinationid)

 {

 var target = $(e.target);

 if(target.closest("#"+id).length == 0){

 var id = document.getElementById(destinationid);

 if(id.style.display == 'block')

 {

 id.style.display = 'none'

 }

 }

 }

 $(function(){

 $(document).bind("click",function(e){

 dealBlankDivHide(e, 'testa','pop');

 dealBlankDivHide(e, 'testa2','pop2');

 })

 })

 </script>

 <span id="testa">

 <a onclick="toggle('pop')">onclick</a>

 <div id="pop" style="display:none;">

 <input type="checkbox" name = "test1"/>test1

 <input type="checkbox" name = "test2"/>test2

 <input type="checkbox" name = "test3"/>test3

 <input type="checkbox" name = "test4"/>test4

 <input type="checkbox" name = "test5"/>test5

 </div>

 <span>

 <span id="testa2">

 <a onclick="toggle('pop2')">onclick</a>

 <div id="pop2" style="display:none;">

 <input type="checkbox" name = "test1"/>test11

 <input type="checkbox" name = "test2"/>test22

 <input type="checkbox" name = "test3"/>test33

 <input type="checkbox" name = "test4"/>test44

 <input type="checkbox" name = "test5"/>test55

 </div>

 <span>

 </br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 fsdfsdfsfsfsdfsfddf</br>

 </body>

 </html>

jquery点击div以外的区域触发事件的更多相关文章

  1. 三种方法教你HTML实现点击某一个元素之外触发事件

    HTML实现点击某一个元素之外触发事件 大致编写的HTML界面渲染后是这个样子的,我们现在想要实现的需求是点击Button所在的div不会触发事件,而在点击Button所在的div之外的区域时会触发事 ...

  2. jQuery实现点击div外的区域，来隐藏指定节点

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  3. Jquery点击div之外的地方隐藏当前div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  4. 怎么点击div之外的区域就隐藏这个div啊 找了很久，都没有很好解决

    方法一. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" conte ...

  5. jQuery点击div其他地方隐藏div

    $(document).bind("click",function(e){ var target = $(e.target); ){ $("#regionlist&quo ...

  6. jQuery监听文本框值改变触发事件（propertychange）

    完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. 【转载】jquery实现勾选复选框触发事件给input赋值+回显复选框

    引用:https://blog.csdn.net/rui276933335/article/details/45717461 JSP: <td class="as1"> ...

  8. 深入A标签点击触发事件而不跳转的详解

    本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...

  9. target属性用于返回最初触发事件的DOM元素。

    target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p& ...

随机推荐

  1. zookeeper（四）：核心原理（Watcher、事件和状态）

    zookeeper主要是为了统一分布式系统中各个节点的工作状态,在资源冲突的情况下协调提供节点资源抢占,提供给每个节点了解整个集群所处状态的途径.这一切的实现都依赖于zookeeper中的事件监听和通 ...

  2. IBATIS中‘$’与‘#’使用

    IBATIS中关于iterate和‘$’与‘#’的应用 一个包含List元素的HashMap参数赋给sqlMap  public int getCountById(String id, String ...

  3. spring读取配置文件PropertyPlaceholderConfigurer类的使用

    这里主要介绍PropertyPlaceholderConfigurer这个类的使用,spring中的该类主要用来读取配置文件并将配置文件中的变量设置到上下文环境中,并进行赋值. 一.此处使用list标 ...

  4. linux重命名session和window

    重命名 window title 最近想要给screen session中的每一个 窗口命名一个标识名字,而不是默认的 $ bash 相关命令: ctrl+z(我的screen配置的+z,默认是+a) ...

  5. Java字符串中文检测转换

    public class ChineseUtils { public static void main(String[] args) { String str = "中国 (1).jpg&q ...

  6. 解决 Visual Studio For Mac 还原包失败问题

    体验了一把改名部最新的杰作,总体感觉挺好,也能看出微软在跨平台这方面所做出的努力. 可能是预览版的缘故,还是遇到一个比较大的问题,创建netcore项目后,依赖包还原失败,错误信息如下: 可以先试着手 ...

  7. SSH初体验系列--Hibernate--1--环境配置及demo

    最近在学hibernate,常见的教程都是搭配mysql,因为公司本地电脑用的是pg,所以就尝试着做个pg的小demo. 自己也是边学边写,只当是加深印象.话不多说,直接开始; 一) 准备工作; 1) ...

  8. sql把varchar转化为int型

    select Max(convert(int,id))from member_Info;

  9. 目标跟踪之卡尔曼滤波---理解Kalman滤波的使用

    http://www.cnblogs.com/jcchen1987/p/4371439.html

  10. Java序列化（转载）

    引用自:http://developer.51cto.com/art/201506/479979_all.htm 关于 Java 对象序列化您不知道的 5 件事 数年前,当和一个软件团队一起用 Jav ...