<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;

})

})

<body>

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

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

		</div>

	</div>

</body>

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

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

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

  2. 点击div外面该div消失(二)

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

  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. Jquery DOM 操作列表

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...

  2. 【python3】collections系列介绍

    文章来源:http://www.jb51.net/article/48771.htm (http://www.cnblogs.com/wushank/p/5122786.html) 修改人:天马流行拳 ...

  3. PTA List Components

    For a given undirected graph with N vertices and E edges, please list all the connected components b ...

  4. 使用Memcached提高.NET应用程序的性能

    在应用程序运行的过程中总会有一些经常需要访问并且变化不频繁的数据,如果每次获取这些数据都需要从数据库或者外部文件系统中去读取,性能肯定会受到影响,所以通常的做法就是将这部分数据缓存起来,只要数据没有发 ...

  5. 钩子机制（hook）

    钩子是编程惯用的一种手法,用来解决一种或多种特殊情况的处理. 简单来说,钩子就是适配器原理,或者说是表驱动原理,我们预先定义了一些钩子,在正常的代码逻辑中使用钩子去适配一些特殊的属性,样式或事件,这样 ...

  6. (转)深入理解PHP之数组(遍历顺序)

    深入理解PHP之数组(遍历顺序)(转) http://www.laruence.com/2009/08/23/1065.html (鸟哥) 经常会有人问我, PHP的数组, 如果用foreach来访问 ...

  7. openssl,db,mysql,sasl编译安装

    yum -y install nfs-utils nfs4-acl-tools nfs-utils-libyum -y install gcc gcc* libtool libtools-ltdl l ...

  8. Android 开发必备

    Android 开发必备 http://www.androiddevtools.cn/ 收集整理Android开发所需的Android SDK.开发中用到的工具.Android开发教程.Android ...

  9. php函数间的参数传递(值传递/引用传递)

    php:函数间的参数传递 1.值传递 代码如下: <?php function exam($var1){ $var1++: echo "In Exam:" . $var1 . ...

  10. Unity3D研究院之使用Animation编辑器编辑动画（五十四）

     Unity提供了Animation编辑器,它可以为我们编辑物理动画.举个例子比如场景中有一个来回摇动的秋千,这个秋千在项目中完全只起到衬托作用,它不会与别的游戏对象有任何交互.如果这个秋千也用代码来 ...