0

我是一名设计师，除了 HTML/CSS 之外，我并不擅长编写任何代码。我几乎不懂 Javascript，但我通常可以通过 Franken-copypasta 来获得成功的 jQuery 脚本，以获得简单的动画和基本功能。但在这种情况下，我在某个地方被绊倒了，我不知道在哪里。

该脚本仅用于在单击“#showNav”按钮时在 0 到 -250px 之间切换“#left-sidebar”元素的“left”属性。

$(document).ready(function(){
var navPos = $('#left-sidebar').position().left;
$('#showNav').click(function(){
    if(navPos = -250){
        $('#left-sidebar').animate({
            left: '0px'
        }, 500);
    } else {
        $('#left-sidebar').animate({
            left: '-250px'
        }, 500);
    }
});
});

我想我可以写一个 if/then 语句来检查元素是否已经在 -250，并相应地切换到相反的值。目前，单击该按钮会导致#left-sidebar 从-250 变为0，但是当我再次单击该按钮时，它不会按预期返回-250。我想这是一个非常简单的修复，但我什至不知道从哪里开始......

4

2 回答 2

1

移动var navPos = $('#left-sidebar').position().left;到您的点击处理程序内部，它将起作用。

现在，您只分配navPos一次。所以navPos总是会保持初始值，不管你多久点击一次。

所以你需要的是用户点击#showNavdiv时的位置。

这是完整的更新代码：

$(document).ready(function(){
  $('#showNav').click(function(){
    var navPos = $('#left-sidebar').position().left; 

    if(navPos == -250){
      $('#left-sidebar').animate({left: '0px'}, 500);
    } else {
      $('#left-sidebar').animate({left: '-250px'}, 500);
    }
  });
});
于 2012-11-08T01:39:28.920 回答
1

代码演示

$(function(){ // a bit shorter DOM ready

    $('#showNav').click(function(){
        var navPos = $('#left-sidebar').position().left;       
        $('#left-sidebar').stop().animate({left: navPos===-250 ? 0 : -250}, 500);
    });

});
  • 点击检索位置和
  • 使用一个简单的三元运算符，它只是说：
is navPos === -250            ?
if YES (animate left to 0   ) :
if NO  (animate left to -250) ;
于 2012-11-08T01:46:15.183 回答