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

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

时间： 2024-08-05 12:39:55

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

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

注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="text/css"> body { background-color:#999999; } #myDiv { background-color:#FFFFFF; width:250px; height:250px; display:none; } </style> <body> <input id="btn&

点击div外面隐藏弹窗

//点击div外面隐藏弹窗function click_out_div(){ $(document).bind("click",function(e){ var target = $(e.target); if(target.closest("#select_div").length == 0){//点击div之外的地方触发 $("#select_div").hide(); } });}

如何设计点击点击一个div，其他div做出对应反应

<div id="show"> <div>1</div> <div>2</div> <div>3</div> </div> <div id="click"> <div>click1</div> <div>click2</div> <div>click3</div> </div>

JavaScript动态实现div窗口弹出&消失功能

先积累一个JavaScript动态实现div窗口弹出&消失功能首先是index.jsp代码 <html> <head> <link rel="stylesheet" href="css/DivStyle.css" media="screen"> <script type="text/javascript" src="scripts/div.js">&

点击同一按钮实现div的隐藏与现实切换

点击同一按钮实现div的隐藏与现实切换:在很多应用中,都有这样的功能,点击同一个按钮可以实现div的隐藏或者现实,当然操作的并非必须是按钮或者div,不过原理是一样的,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

jquery点击非div区域隐藏div

点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框 html代码 <div class="per_c"> <div class="person-msg pull-right"> <img src="../../res/images/snow_man.jpg"> </div> <dl class=

JavaScript DOM案例点击按钮显示隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <

Jquery点击任意地方隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/lib

DIV 自定义滚动条样式（二）

流浏览器自带的滚动条样式很丑,确实有必要美化. 滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar 定义了滚动条整体的样式: ::-webkit-scrollbar-thumb 滑块部分: ::-webkit-scrollbar-thumb 轨道部分: 下面以overflow-y:auto;为例(overflow-x:auto同) html