jquery - div の外側をクリックして非表示にします

Question

クリック時に単純な jquery 関数を使用して、非表示のログイン div を表示しています。

function showLog(){
 $('#signin_menu').slideDown();
}

ユーザーがボックスの外側をクリックしたときにdivを非表示にするには、これをどのように編集しますか?

div html (必要な場合)

<div id="signin_menu" >
 <p>
      <label for="email">Email</label>
      <input type="email" name="email" id="email" tabindex="4" title="email">
      </p>
      <p>
        <label for="password">Password</label>
        <input type="password" name="password" id="password" title="password" tabindex="5">
      </p>
      <p class="remember">
         <input type="button" class="button-link" name="submit" style="cursor:pointer" id="submit" value="Log In" onclick="logMeIn()" tabindex="6">

        <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
        <label for="remember">Remember me</label>
      </p>

  </div>

Answer 1

function showLog(){
    var $element = $("signin_menu");
    $('body').click(function(e){
    if (e.target.id !== "signin_menu"  && !$element.find(e.target).length)
        $element.slideDown();
    }); 
}

またはデリゲートイベントを使用：

$('body').on('click', ':not(#signin_menu)', function(){
    $('#signin_menu').slideDown();
});

Answer 2

$(document).click(function(e) {
    if (e.target.id && ((e.target.id !== "signin_menu") || $("#signin_menu").find($(e.target)))) {
        $("#signin_menu").slideDown();
    }   
});

Answer 3

var $e = $('#signin_menu');
$(document).click(function(event){
   if (!$(event.target).closest('#signin_menu').length && event.target.id !== 'showlog') {
     $e.slideUp();
   }
});

http://jsfiddle.net/7SCN5/