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/

该mouseup触发,掩藏框,然后click触发,这表明盒子.