jquery div hide

Question

我有一个div标签，其中包括输入控件。当用户点击一个菜单项时，这个div被打开。当点击超出div区域时，我想隐藏此标记。

目前我可以隐藏div点击外部时，但我的div隐藏时，我点击div中的任何输入控件。我该如何解决这个问题？

我的代码是：

$(document).click(function (e) { 
    var elem = $(e.target).attr('id'); 
    console.log(e.target); 

    if (elem !== 'btnLogin') { 
    // if (elem != 'TxtUserName' && elem != 'TxtPassword') 
    HideLoginDetails(); 
    } 

    if (elem !== 'hpUseFul') { 
    // if(elem !== 'y') 
    } 
}); 

Answer 1

演示：http://jsfiddle.net/3fbpA/

var aboveDiv = false; 

$('#yourDiv').click(function() { 
    aboveDiv = true; 
}); 

$(document).click(function() { 
    if (!aboveDiv) $('#yourDiv').hide(); 
    aboveDiv = false; 
}); 

Answer 2

jQuery(document).ready(function() 
{ 
    $('the div you want').hover(function(){ 
     mouse_inside=true; 
    }, function(){ 
     mouse_inside=false; 
    }); 

    $("body").mouseup(function(){ 
     if(! mouse_inside) $('the div you want').hide(); 
    }); 
}); 

同时检查 “Use jQuery to hide a DIV when the user clicks outside of it”。

Answer 3

我已经做了完整的垃圾箱上面的问题。您可以点击这里演示链接...

演示http://codebins.com/bin/4ldqp71

HTML

<div id="loginDialog"> 
    <div class="field"> 
    <label> 
     User Name: 
    </label> 

    <span class="input"> 
     <input type="text" value="" id="txtuser" size="15"/> 

    </span> 
    </div> 
    <div class="field"> 
    <label> 
     Password: 
    </label> 

    <span class="input"> 
     <input type="password" value="" id="txtpassword" size="15"/> 

    </span> 
    </div> 
    <div class="field"> 
    <input type="button" id="btn_ok" value="Login" /> 
    </div> 
</div> 
<div> 
    <a href="javascript:void(0);" id="btnLogin"> 
    Login 
    </a> 
    <a href="javascript:void(0);" id="btnMenu1"> 
    Menu1 
    </a> 
    <a href="javascript:void(0);" id="btnMenu2"> 
    Menu2 
    </a> 
</div> 

JQuery的

$(function() { 
    $("#btnLogin").click(function() { 
     $("#loginDialog").show(500); 
    }); 
    $(document).click(function(e) { 
     e.preventDefault(); 
     var elem = $(e.target).attr('id'); 
     if ($(e.target).parents("#loginDialog").length) { 
      $("#loginDialog").show(); 
     } else { 
      if ($(e.target).attr('id') !== "btnLogin") { 
       $("#loginDialog").hide(300); 
      } 
     } 
    }); 
}); 

CSS

#loginDialog{ 
    border:1px solid #333; 
    padding:4px; 
    background:#2A2A2A; 
    width:250px; 
    color:#dfdfdf; 
    display:none; 
} 
#loginDialog input{ 
    border:1px solid #efefef; 
} 
#loginDialog input[type=button]{ 
    background:#ababab; 
} 
#loginDialog input[type=button]:hover{ 
    background:#cfcfcf; 
} 
#loginDialog .field{ 
    text-align:center; 
    margin-bottom:5px; 
} 
#loginDialog label{ 
    display:inline-block; 
    width:100px; 
} 
a{ 
    display:inline-block; 
    margin-left:8px; 
} 

演示http://codebins.com/bin/4ldqp71