Javascript 如何在外部单击时隐藏div_Javascript_Jquery

Javascript 如何在外部单击时隐藏div

javascript jquery

Javascript 如何在外部单击时隐藏div,javascript,jquery,Javascript,Jquery,我开始使用jquery，并尝试创建一个简单的div隐藏和显示效果。效果似乎很好，但我需要的是，当用户单击文档的任何其他部分（即，除了隐藏/显示框）时，该框应隐藏回原处。这是JSFIDLE： . 我没有把它设计好。我希望效果先起作用。有人能帮我吗？以下是HTML代码： <style> #mail_floater { background:#fce8bd; height:88px; width:342px; border:1px solid #b7ad

我开始使用jquery，并尝试创建一个简单的div隐藏和显示效果。效果似乎很好，但我需要的是，当用户单击文档的任何其他部分（即，除了隐藏/显示框）时，该框应隐藏回原处。这是JSFIDLE： . 我没有把它设计好。我希望效果先起作用。有人能帮我吗？以下是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>

演示：

@neal谢谢你的帮助。但这在我的代码中不起作用。它永久地隐藏着这个盒子。放置此代码后，单击锚定按钮时，该框不会显示。现在效果正在发挥作用，但即使在我单击div或div的任何元素时，div也会隐藏起来。有什么解决方案吗？@user1720527摆弄它。我相信你会得到它：-D@neal谢谢你的帮助。但这在我的代码中不起作用。它永久地隐藏着这个盒子。放置此代码后，单击锚定按钮时，该框不会显示。现在效果正在发挥作用，但即使在我单击div或div的任何元素时，div也会隐藏起来。有什么解决方案吗？@user1720527摆弄它。我相信你会得到它

$(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();

                           });




                   });

$(document).on('click', ':not(.hideDiv)', function(e){
    if($(e.target).is(':not(.hideDiv)')) { //extra check for good measure
         $('.hideDiv').hide();
    }
});