我正在启动jquery并试着创建一个简单的div hide和show effect。效果似乎工作正常,但我需要当用户点击文档的任何其他部分(除了隐藏/显示框),该框应隐藏回来。这是jsfiddle: http://jsfiddle.net/39DzJ/。我没有正确设计它。我希望效果首先发挥作用。 谁能帮我吗 ? 这是HTML代码:
<style>
#mail_floater
{
background:#fce8bd;
height:88px;
width:342px;
border:1px solid #b7ad02;
border-radius:5px;
position:absolute;
left:200px;
top:50px;
border-top:none;
z-index:100;
padding:0;
}
#subscribe_user
{
width:248px;
height:16px;
border:1px solid #b7ad02;
}
#cust_care_floater
{
background:#fce8bd;
height:12px;
width:108px;
border:1px solid #b7ad02;
border-radius:2px;
border-bottom-left-radius:2px;
position:absolute;
left:450px;
top:30px;
border-top:none;
z-index:100;
clear:both;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
color:#036f05;
box-shadow:1px 1px 3px #ccc inset;
}
#closer
{
float:right;
margin-right:5px;
margin-top:2px;
width:19px;
height:19px;
background:url(../images/close.png) no-repeat;
}
</style>
</head>
<body>
<a href="#" id="subscribe">Subscribe</a>
<a href="#" id="customer_care">Customer care</a>
<div id="mail_floater">
<h5>Email</h5>
<div id="closer"></div>
<div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span>
<input type="submit" id="subscribe_me" value="Done" /></form></div>
</div>
<div id="cust_care_floater">
<span style="padding:0px 10px 0 10px;">033-993-99920</span>
</div>
</body>
javascript代码:
$(document).ready (
function()
{
var disp_box=$('#mail_floater');
var sub_link=$('#subscribe');
var disp_box_2=$('#cust_care_floater');
var sub_link_2=$('#customer_care');
disp_box.hide();
disp_box_2.hide();
sub_link.click
(
function()
{
disp_box.show();
});
disp_box.find('#closer').click
(
function()
{
disp_box.hide();
});
sub_link_2.click
(
function()
{
disp_box_2.show();
});
});
答案 0 :(得分:3)
$(document).on('click', ':not(.hideDiv)', function(e){
if($(e.target).is(':not(.hideDiv)')) { //extra check for good measure
$('.hideDiv').hide();
}
});