jQuery满足'如果'没有执行

时间:2013-12-18 11:35:14

标签: javascript jquery html css html5

我正在玩一些交互式菜单,目前有一个隐藏菜单,当按下按钮时会出现在右侧,并将整个内容移到一起。有点像移动Facebook应用程序。要确定按钮是否应该滑出菜单或将其放回到i中,请使用javascript if语句,但是如果不满足if条件,则只运行else,如果语句满足则不运行if。

var height = $(window).height(),
    width = $(window).width(),
    sideright = $("#sidemenu").outerWidth();
    sidepos = parseInt($("#sidemenu").css( "right" ));

    $("#sidemenu").css("right", - sideright);

    $(".menubutton").click( function() {
        alert(sidepos);

    if(sidepos == '0') {    
        $("#sidemenu").css("right", - sideright);
        $("#content").css("left", "0" );
    }

    else{
        $("#sidemenu").css("right", "0");
        $("#content").css("left", - sideright);
    }

    alert(sidepos);
});

警报是出于测试目的,所以我可以看到在执行函数之前读取的变量是什么。

看起来菜单移位后,读取菜单正确位置的变量没有按原样改变。

我在这里设置了一个示例脚本http://jsfiddle.net/Ccxs6/

非常感谢

2 个答案:

答案 0 :(得分:2)

无论如何你要将sidepos设置为-sideright,所以只需使用它,并在条件中检查一个不是字符串的数字,一旦点击,该变量必须更新,否则条件将始终给出相同的结果:

var height = $(window).height(),
    width = $(window).width(),
    sideright = $("#sidemenu").outerWidth(),
    sidepos = -sideright;

$("#sidemenu").css("right", -sideright);

$("#button").click(function () {
    if (sidepos === 0) {
        $("#sidemenu").css("right", -sideright);
        $("#content").css("left", "0");
    } else {
        $("#sidemenu").css("right", "0");
        $("#content").css("left", -sideright);
    }
    sidepos = parseInt($("#sidemenu").css("right"),10);
});

FIDDLE

答案 1 :(得分:2)

这里更新了解决方案。

$("#button").click( function() {
    var sidepos = parseInt($("#sidemenu").css( "right" ));
    alert(sidepos);

if(sidepos == '0') {    

    $("#sidemenu").css("right", - sideright);
    $("#content").css("left", "0" );
}

else{

    $("#sidemenu").css("right", "0");
    $("#content").css("left", - sideright);
}

    alert(sidepos);

});

<强> Fiddle