点击空白地方隐藏 div (直接上代码)

最新推荐文章于 2023-08-04 10:56:12 发布

weixin_42119076

最新推荐文章于 2023-08-04 10:56:12 发布

阅读量422

点赞数

本文链接：https://blog.csdn.net/weixin_42119076/article/details/98087805

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta content="telephone=no" name="format-detection" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title>me_otherprofile</title>
<style type="text/css">
.btn_click{
position: relative;
width:50px;
}
.model{
width:200px;
height:200px;
background-color: #f5f5f5;
display: none;
position: absolute;
left:100%;
top:0;
}
.model span{
padding: 0.45em 0.625em;
font-size: 0.875em;
margin-right: 0.625em;
border-radius: 0.3em;
border: 1px solid #ddd;
display: inline-block;
margin-top: 0.625em;
}
.model span.active{
border:1px solid #21955b;
color:#21955b;
}
</style>
</head>
<body>
<div class="btn_click">
<p>click1</p>
<div class="model model1">
<span>model1</span>
<span>model2</span>
<span>model3</span>
<span>model4</span>
</div>
</div>
<div class="btn_click">
<p>click2</p>
<div class="model model2">
<span>model1</span>
<span>model2</span>
<span>model3</span>
<span>model4</span>
</div>
</div>
<div class="btn_click">
<p>click3</p>
<div class="model model3">
<span>model1</span>
<span>model2</span>
<span>model3</span>
<span>model4</span>
</div>
</div>

<script type="text/javascript">
$(function(){
$('.btn_click p').on("click", function(e) {　　　　　　　　
if($(this).siblings(".model").css("display") == "none") {　　　　　　　　　　
$(this).siblings(".model").slideDown();　　　　　　　　
} else {　　　　　　　　　　
$(this).siblings(".model").slideUp();　　　　　　　　
}　　　
e = e || event;
stopFunc(e);　　　
});
document.onclick = function(e) {　　　
$(".model").slideUp();　
}
function stopFunc(e) {　　　　　　
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;　　　　
}
$(".model span").on("click",function(event){
event.stopPropagation();
$(this).toggleClass("active");
})
$(".model").on("click",function(event){
event.stopPropagation();
})
})
</script>
</body>
</html>

weixin_42119076

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击空白地方隐藏 div (直接上代码)

<!DOCTYPE html><html><head> <meta charset="utf-8"> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta name="viewport" content="width=device-width, initi...
复制链接

扫一扫