点击div外面该div消失

<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消失

相关文章