<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

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

		<style type="text/css">

			.main {

				width: 300px;

				height: 300px;

				background: red;

			}

			.content {

				width: 100px;

				height: 100px;

				background: blue;

			}

		</style>

		<script type="text/javascript">

//			$(function() {   //方法一

//				$("#showdiv").click(function(e) {

//					if($("#test").is(":hidden")) {

//						$("#test").fadeIn();

//						e ? e.stopPropagation() : event.cancelBubble = true;

//					}

//				});

//				$("#test").click(function(e) {

//					e ? e.stopPropagation() : event.cancelBubble = true;

//				});

//				$(document).click(function() {

//					$("#test").fadeOut();

//				});

//			})

//          $(function(){   //方法二

//          	$("#showdiv").click(function(e){

//          		alert(e.target.className);

//          		if(e.target.className!=="content"){

//          			$("#test").hide();

////          			$("#showdiv").hide();

//          		}

//          	})

//          	$("#test").click(function(){

//          		alert(1111);

//          		return false;  //阻止事件冒泡到父级DIV

//          	})

//          })

            $(function(){    //方法三

            	$("#showdiv").click(function(){

            		$("#test").hide();

            		return false;

            	})

            	$("#test").click(function(){

            		return false;

            	})

            })

		</script>

	</head>

	<body>

		<div id="showdiv" class="main">

			<div id="test" class="content">

			</div>

		</div>

	</body>

</html>

　　

点击div外面该div消失(二)的更多相关文章

  1. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  2. 点击div外面该div消失

    <head> <meta charset="UTF-8"> <title></title> <script type=&quo ...

  3. 21.JQ的监听事件（点击div外面可以让它消失）

    JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...

  4. 点击其它位置，div下拉菜单消失

    接下拉菜单那一篇: 加上点击其它位置,下拉菜单消失. 纯js写法: window.document.addEventListener('click', function(e) { var e = e ...

  5. 如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点

    <div id="show"> <div>1</div> <div>2</div> <div>3</d ...

  6. 点击自动显示/隐藏DIV代码。(简单实用）

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...

  7. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  8. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  9. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

随机推荐

  1. Ubuntu12.04-x64编译Hadoop2.2.0和安装Hadoop2.2.0集群

      本文Blog地址:http://www.cnblogs.com/fesh/p/3766656.html   本文对Hadoop-2.2.0源码进行重新编译(64位操作系统下不重新编译会有版本问题) ...

  2. 用window.showModelDialog() 打开的页面的返回值

    有两个页面也个 Default1.aspx   另外一个是 Default2.aspx Default1.aspx 有个按钮是用来打开Default2.aspx页面的 按钮的js代码是 var win ...

  3. Android Studio鼠标悬停显示注释

    Android Studio鼠标悬停显示注释 在AS中配置 如果你想从网上查看注释,到这一步就操作完成. 下面说明让软件使用本地注释: 使用本地注释 以Windows为例: 找到下面文件 C:\Use ...

  4. UI自动化测试的那些事

    互联网产品的迭代速度远高于传统软件,尤其是移动APP不但更新频繁,还需要在不同硬件.系统版本的环境下进行大量兼容测试,这就给传统测试方法和测试工具带来了巨大挑战.为满足产品敏捷开发.快速迭代的需求,自 ...

  5. 解决IE上登陆oracle OEM时报：“证书错误，导航已阻止”的错误

    今天在IE上登陆OEM时,报证书错误,导航已阻止,我选择:继续浏览此网站(不推荐),但是点了之后还没有反应,在网上搜了很多,原因基本都是windows的问题,最后发现问题是:oracle oem证书的 ...

  6. Ubuntu下搭建Android编译环境

    Ubuntu一台新机器的一些环境搭建新增一个3TB的硬盘,挂载方法,大于2TB的得parted来进行分区1: sudo parted /dev/sda2: mklabel gpt3: unit TB4 ...

  7. POJ 1228 - Grandpa's Estate 稳定凸包

    稳定凸包问题 要求每条边上至少有三个点,且对凸包上点数为1,2时要特判 巨坑无比,调了很长时间= = //POJ 1228 //稳定凸包问题,等价于每条边上至少有三个点,但对m = 1(点)和m = ...

  8. JAVA学习<三>

    1.Java中运算符的优先级: 2.条件语句If: 如果 if 条件成立时的执行语句只有一条,是可以省略大括号滴!但如果执行语句有多条,那么大括号就是不可或缺的. public class Hello ...

  9. Codeforces Round #382 (Div. 2) 继续python作死 含树形DP

    A - Ostap and Grasshopper zz题能不能跳到  每次只能跳K步 不能跳到# 问能不能T-G  随便跳跳就可以了  第一次居然跳越界0.0  傻子哦  WA1 n,k = map ...

  10. Python全栈--9.1--面向对象进阶-super 类对象成员--类属性- 私有属性 查找源码类对象步骤 类特殊成员 isinstance issubclass 异常处理

    上一篇文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象 ...