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，显示了该框。

Answer 2

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

有关详细信息，请参阅this 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}

Jquery和Bootstrap.js - DIV会显示但不会隐藏

3 个答案: