单击 div 外部使其隐藏答案

【问题标题】：Click outside of div to make it hide单击 div 外部使其隐藏
【发布时间】：2013-01-05 21:32:02
【问题描述】：

我在点击时使用一个简单的 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>

【问题讨论】：

标签： jquery function hide

【解决方案1】：

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/

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：