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/

单击div外部使其隐藏

3 个答案: