Jquery鼠标在除按钮以外的空白区域点击的box隐藏

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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=gb2312" />
<title>鼠标在除按钮以外的空白区域点击左下角隐藏</title>
<style>
* {margin:0; padding:0;}
ul,li {list-style-type:none;}
.btn {
font-size: 14px;
line-height: 32px;
font-weight: bold;
color: #FFFFFF;
background-color: #0033FF;
text-align: center;
height: 32px;
margin: 25px;
width: 88px;
}
.btn:hover {
color: #FF0033;
cursor:pointer;
}
.box {
background-color: #CC9933;
height: 120px;
width: 120px;
position:fixed;
left: 0px;
bottom: 0px;
display: none;
}
</style>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<body>
<div class="btn">按钮</div>
<div class="box"></div>
<script>
$(function(){
$('.btn').click(function(){
$('.box').show();
});
});
</script>
</body>
</html> 展开

 我来答

2个回答

#合辑# 机票是越早买越便宜吗？

百度网友9061227
推荐于2017-09-05 · TA获得超过282个赞

知道小有建树答主

回答量：257

采纳率：0%

帮助的人：102万

我也去答题访问个人页

关注

展开全部

<script>
$(function(){
$('.btn').click(function(event){
	event.stopImmediatePropagation();//取消事件冒泡；
$('.box').show();
});

$(document).bind("click",function(){
	$('.box').hide();
})
});
</script>

已赞过 已踩过<

评论收起

让猫飞一会儿
2015-01-19 · TA获得超过1120个赞

知道小有建树答主

回答量：540

采纳率：80%

帮助的人：278万

我也去答题访问个人页

关注

展开全部

这个比较好理解：
<script>
$(function(){
$("body").bind("click",function(evt){
if(evt.target!=$('.btn').get(0)) {
$('.box').hide();
}
});
$('.btn').click(function(){
$('.box').show();
});
});
</script>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

Jquery鼠标在除按钮以外的空白区域点击的box隐藏

其他类似问题

为你推荐：