点击div之外的地方，div隐藏

最新推荐文章于 2022-05-11 09:15:57 发布

繁华是瑾

最新推荐文章于 2022-05-11 09:15:57 发布

阅读量956

点赞数

文章标签：隐藏 html

本文链接：https://blog.csdn.net/u013935095/article/details/71514587

版权

对于一个div1，想要在点击div1的父元素或者body元素的时候，使div1隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<style type="text/css">
*{
    margin:0;
    padding:0;
    }
.div{
    width:300px;
    height:300px;
    position:absolute;
    top:50px;
    left:100px;
    background:#00BCF3;
    
    }
    .div1{
    	width: 100px;
    	height: 100px;
    	background-color: red;
    }
</style>
</head>
<body>
<div class="div">
	<div class="div1"></div>
</div>
<script>
	$(".div").click(function(e){
		console.log("1");
		if( !$( e.target ).closest(".div1").length ){
			$(".div1").hide();
		}
	});
</script>
</body>
</html>

如果想要在body元素上点击隐藏，就把class=div给删掉，$(".div")改成body就可以了；

说一下原理，想在div1之外的地方隐藏他们，在外面点，就相当于在div或者body上面点击，只需要在div上绑定一个click事件，这时就要判断是在div1内还是div1外，

e.target代表我们点击的元素，closest防范判断e.target本身和父辈元素中，是不是div1元素，也就是判断是不是在div1内点击；

繁华是瑾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击div之外的地方，div隐藏

对于一个div1，想要在点击div1的父元素或者body元素的时候，使div1隐藏文档*{ margin:0; padding:0; }.div{ width:300px; height:300px; position:absolute; top:50px; left:100px; background
复制链接

扫一扫