2

我在我的站点中使用 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's css 会改变，但是如果我再次点击按钮，else 语句将不会执行。但是如果我点击离开，底部的代码会隐藏我的 div 。问题是什么？

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

4

3 回答 3

5

这个说法：

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

返回一个 jQuery 对象，它总是“真实的”。

你要这个：

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

is()返回一个布尔值“如果这些元素中至少有一个与给定的参数匹配”。

编辑以响应您的小提琴..试试这个：

http://jsfiddle.net/XsLNJ/

mouseup隐藏盒子的触发器，然后显示click盒子的触发器。

于 2013-08-29T15:24:45.827 回答
1

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

有关更多详细信息，请参阅此 jsFiddle ...

在控制台中，您会注意到它console.log($("#togglesection").is(":visible"));返回一个布尔值，而console.log($("#togglesection").not(":visible"));返回一个实际对象。

于 2013-08-29T15:24:18.147 回答
0

您可以简化为：

$(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}
于 2013-08-29T15:47:30.340 回答