jquery：div隐藏/显示焦点问题

Question

感谢inti的代码我能够找出答案！

的jQuery：

$(document).ready(function(){ 
    $("body").click(function(e) { 
     //checks to see if the tag you clicked has the #login 
     //div as a parent. 
     if($(e.target).closest("#login").size() == 0) { 
      //makes exception for the #login's <a> tag (id of a_login) 
      if((e.target.id) == 'a_login') { 
       $("#login").show(); 
      } else { 
       $("#login").hide(); 
      } 
     //if target has #login as parent, keep it visible 
     } else { 
      $("#login").show(); 
     } 
    }); 

}); 

工作的jsfiddle例如：http://jsfiddle.net/SuperPhil/3CmE7/

谢谢！

---

我想要登录屏幕类似http://dropbox.com登录。用户点击登录链接并显示div（CSS）并在焦点出现时消失。

这里是我的jQuery

$('#login').bind('click', function() { 
    $('#login').addClass("clicked").focusout(function() { 
     $('#login').removeClass('clicked'); 
    }); 
}); 

这是行不通的。谁能帮我吗？

编辑：

$('#login').click(function() { 
    $('#login div').addClass("clicked").blur(function() { 
     $('#login div').removeClass('clicked'); 
    }); 

}); 

Answer 1

你正在寻找的事件是.blur()不.focusout()。

编辑：点击了#mydiv来隐藏它：

$("body").click(function(e) { 
    if ($(e.target).closest("#mydiv").size() == 0) { 
     $("#mydiv").hide(); 
    } 
}); 

如果这个隐藏#mydiv你点击没有它，因为它的父母之一。

Answer 2

我想你[R看起来像这样...

HTML：

<a href="#">Click Me</a> 

<div id="login"> 
    <label>Username:</label><input type="text"/><br/> 
    <label>Password:</label><input type="password"/><br/> 
</div> 

的jQuery：

$(document).ready(function(){ 
    $("#login").hide(); 
    $('a').bind('click', function() { 
     $("#login").toggle().focus(); 
    }); 
    $("input").focusout(function(){ 
     $("#login").hide(); 
    }); 
}); 

http://jsfiddle.net/anish/ccFt9/1/