Question

我正在玩一些交互式菜单，目前有一个隐藏菜单，当按下按钮时会出现在右侧，并将整个内容移到一起。有点像移动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/

非常感谢

Answer 1

无论如何你要将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

Answer 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

jQuery满足'如果'没有执行

2 个答案: