点击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>

　　

posted @ 2016-08-07 15:01  最骚的就是你  阅读(8802)  评论(0)  编辑  收藏  举报