jQuery和Bootstrap.js-DIV將顯示但不會隱藏

Question

我在我的網站和以下代碼中使用Bootstrap CSS和JS庫：

$(function(){
$("#nav-login-btn").click(function(){
    if($("#togglesection").not(":visible")) {
        $("#nav-login-btn").css({"background-color":"#fff", "color":"#222"});
        $("#togglesection").show();
    }
    else {
        $("#nav-login-btn").css({"background-color":"transparent", "color":"#fff"});
        $("#togglesection").hide();
    }
})
})
$(document).mouseup(function (e)
{
    if (!$("#togglesection").is(e.target) && $("#togglesection").has(e.target).length === 0)
    {
        $("#togglesection").hide();
        $("#nav-login-btn").css({"background-color":"transparent", "color":"#fff"});
    }
});

div將顯示，並且#nav-login-btn的css將更改，但是如果再次按下該按鈕，則else語句將不會執行。 但是，如果我單擊鼠標， 底部代碼將隱藏我的div 。 問題是什么？

這是jsfiddle： http : //jsfiddle.net/Zmzk9

Answer 1

這個說法：

$("#togglesection").not(":visible")

返回一個jQuery對象，該對象始終“真實”。

你要這個：

if (!$("#togglesection").is(":visible")) {

is()返回一個布爾值“如果這些元素中的至少一個與給定參數匹配”。

根據您的小提琴進行編輯 ..嘗試以下操作：

http://jsfiddle.net/XsLNJ/

click mouseup觸發，這將隱藏該框，然后觸發click ，這將顯示該框。

Answer 2

嘗試if(!$("#togglesection").is(":visible")) {

有關更多詳細信息，請參見此jsFiddle 。

在控制台中，您會注意到console.log($("#togglesection").is(":visible")); 返回一個布爾值，而console.log($("#togglesection").not(":visible")); 返回和實際對象。

Answer 3

您可以簡化為：

$(function(){
$("#nav-login-btn").on({
  click:function(){
    $("#togglesection").toggle();
    $("#nav-login-btn").classToggle("active");
  }
});
});

然后是CSS：

#nav-login-btn {background-color:transparent, color:#fff}
#nav-login-btn.active {background-color:#fff, color:#222}