点击按钮显示div，点击空白区域隐藏div，但现在再次点击空白区域的时候，div又自己跑出来了，求解....
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("*").click(function (event) {
if (!$(this).hasClass("div")){
$(".div").toggle();
}
event.stopPropagation();
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
.div{
width:200px;
height:200px;
position:absolute;
top:50px;
left:100px;
background:#00BCF3;
display:none;
}
</style>
</head>
<body>
<input type="button" value="点击"/>
<div class="div"></div>
</body>
</html> 展开
<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>
<script type="text/javascript">
$(document).ready(function () {
$("*").click(function (event) {
if (!$(this).hasClass("div")){
$(".div").toggle();
}
event.stopPropagation();
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
.div{
width:200px;
height:200px;
position:absolute;
top:50px;
left:100px;
background:#00BCF3;
display:none;
}
</style>
</head>
<body>
<input type="button" value="点击"/>
<div class="div"></div>
</body>
</html> 展开
2个回答
展开全部
$(function(){
var div = $(".div"), $d = $(document);
$("input[type=button]").click(function(){
div.fadeIn();
$d.on("mouseup", function(){
$d.off("mouseup");
div.off("mouseup");
div.fadeOut();
return ;
});
div.on("mouseup", function(event){
event.stopPropagation();
return ;
});
});
});望采纳
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
