在身體點擊div隱藏，當我點擊div也隱藏

Question

我想顯示一個div鏈接點擊和隱藏，如果點擊鏈接或div之外。

<a href="#" class='login' id="login">login </a> 
<div class="login-panel"> 
    <input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username"> 
    <input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password"> 
    <input type="submit" value="Login" class="loginBtn"> 
</div> 

最初div被隱藏。和腳本是

$(document).ready(function() { 
    $("#login").click(function() { 
     $("div.login-panel").toggle(); 
    }); 

    $("body").click(function(e){ 
     if(e.target.className == "login" || e.target.className == "login-panel") { 
      //alert("do't hide"); 
     } 
     else { 
      $(".login-panel").hide(); 
     } 
    }); 
}); 

當我點擊鏈接div顯示和重疊一些其他元素，當我點擊身體外死它。 問題是當我點擊輸入框輸入用戶名登錄面板div獲取隱藏。 爲什麼div隱藏？ 任何指導將不勝感激。

Answer 1

http://jsfiddle.net/thirtydot/F4p2x/15/

$(document).ready(function() { 
    $("#login").click(function(e) { 
     $(".login-panel").toggle(); 
     e.stopPropagation(); 
    }); 

    $(document).click(function(e) { 
     if (!$(e.target).is('.login-panel, .login-panel *')) { 
      $(".login-panel").hide(); 
     } 
    }); 
}); 

Answer 2

問題是當我點擊輸入框輸入用戶名登錄面板div 得到隱藏。爲什麼div隱藏？

因爲，當點擊div時也點擊了body。然後觸發這兩個事件。請查看event.stopPropagation()，您可以在body.onclick的其他部分使用它。

Answer 3

在這裏你去：

$(document).ready(function() { 
    $("#login").click(function() { 
     $("div.login-panel").toggle(); 
    }); 
    $("body").click(function (e) { 
     if (e.target.nodeName != "INPUT" && e.target.className!= "login" && e.target.className!= "login-panel") { 
      $(".login-panel").hide(); 
     } 
    }); 
});​ 

你在你if使用了錯誤的選擇，以檢查是否對身體的點擊並沒有針對一個input元素。

Fiddle

Answer 4

你應該做的是這樣的：

http://jsfiddle.net/VWENB/1/

$("#login").click(function(e) { 
    $("div.login-panel").toggle(); 
    e.stopPropagation(); 
}); 
$("body").click(function(e) { 
    if (e.target.className == "field") { 
     //alert("do't hide"); 
    } else { 
     $(".login-panel").hide(); 

    } 
});​ 

Answer 5

，由於您的輸入在於內部#login格，因此，如果您單擊此DIV它會隱藏。所以，你可以使用jQuery :not選擇指定排除那些元素

$(document).ready(function() { 
     $("#login,:not('#LoginForm_username'),:not('#LoginForm_password')").click(function() { 
      $("div.login-panel").toggle(); 
     }); 
     $("body").click(function (e) { 
      if (e.target.className == "login" || e.target.className == "login-panel") { 
       //alert("do't hide"); 
      } else { 
       $(".login-panel").hide(); 

      } 
     }); 
    });​ 

DEMO

Answer 6

當你點擊一個子元素，你的條件（e.target.className）不會應用到您的父元素（<div class="login-panel">）。但是你可以以測試使用jQuery（見here）的closest功能，如果你在你的父元素：

if(e.target.className == "login" || $(e.target).closest(".login-panel").length === 1) { 
    ... 
} 

Answer 7

至於其他的話說點擊輸入原因事件的觸發身體，所以你應該檢查，如果發件人是孩子的登錄我覺得下面的代碼做的伎倆;

$("body").click(function (e) { 

     var $sender = $(e.target); 
     if ($sender.closest(".login-panel").length) { 
      return ; 
     } 
      $(".login-panel").hide(); 
    }); 

編輯：更新與最接近的條件，因爲它是正確的功能。

從當前元素開始，向上移動DOM樹直到找到與提供的選擇器匹配的值。返回的jQuery對象包含原始集合中每個元素的零個或一個元素。

Answer 8

當點擊事件發生只要找到鼠標，

<script type="text/javascript"> 
find_mouse = false; 

$(document).ready(function() 
{ 
    $('.login-panel').hover(function(){ 
     find_mouse=true; // if mouse on login-panel 
    }, function(){ 
     find_mouse=false; // not on login panel 
    }); 

    $("body").click(function(){ 
     if(! find_mouse) // if not on login panel 
     $('.login-panel').hide(); 
    }); 
}); 
</script>