<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>
测试弹框
</title>
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="click">点击</div>
<div class="show" style="border:1px solid blue;width:200px;display:none;">展示区</div>
</body>
<script type="text/javascript">
$(".click").click(function(e){
if($(".show").hasClass("allhide")){
$(".show").hide();
$(".show").removeClass("allhide");
return;
}
e.stopPropagation();
$(".show").show();
$(".show").addClass("allhide");
});
$(document).click(function(){
if($(".show").hasClass("allhide")){
$(".show").hide();
$(".show").removeClass("allhide")
}
});
</script>
<html>
<head>
<meta charset="utf8">
<title>
测试弹框
</title>
<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="click">点击</div>
<div class="show" style="border:1px solid blue;width:200px;display:none;">展示区</div>
</body>
<script type="text/javascript">
$(".click").click(function(e){
if($(".show").hasClass("allhide")){
$(".show").hide();
$(".show").removeClass("allhide");
return;
}
e.stopPropagation();
$(".show").show();
$(".show").addClass("allhide");
});
$(document).click(function(){
if($(".show").hasClass("allhide")){
$(".show").hide();
$(".show").removeClass("allhide")
}
});
</script>
</html>
可直接测试