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