问题与JavaScript如果和其他

Question

我有一个元素（导航）隐藏或显示时，另一个元素（#aNav）被点击。

这已经运行良好。

但现在我想要点击元素（#aNav）本身获得一些改变的样式。 这些样式也应该改变，不管是否显示（导航）元素。 再次单击时，不执行else部分。

下面是代码：

function nav(){ 
$('#aNav').click(function() { 

    //changes the value of left 
    var $lefter = $("nav"); 
    $lefter.animate({ 
     left: parseInt($lefter.css('left'),10) == 0 ? 
      -$lefter.outerWidth() : 
      0 
    }); 

    left = $("nav").css("left"); 
    if(left == 0) { 
     $("#aNav div").css({ 
      "border-right":"33px solid transparent", 
      "border-left":"0 solid transparent" 
     }); 

    } else { 
     $("#aNav div").css({ 
      "border-left":"33px solid transparent", 
      "border-right":"0 solid transparent" 
      }); 
     } 

    }); 
}; 
$(document).ready(function(){ 
    nav(); 
}); 

我只希望要执行的其他部分。 也许有人可以帮忙。

Answer 1

jQuery的css()方法将返回值和单位left财产，所以它永远不会是0：JSFiddle demo

要在左边的值是一个整数，可以用parseInt，这将解析，直到它运行到非数值：

left = parseInt($("nav").css("left"), 10);

Answer 2

看起来你可以在动画过程中被检查资产净值的left属性，在其不为0

如果移动到其他的动画一个功能齐全操作呢？ 东西像这样：

function nav(){ 
    $('#aNav').click(function() { 
    //changes the value of left 
    var $lefter = $("nav"); 
    $lefter.animate({ 
     left: parseInt($lefter.css('left'),10) == 0 ? 
      -$lefter.outerWidth() : 
      0 
    }, function(){ 

     left = $("nav").css("left"); 
     if(left == 0) { 
     $("#aNav div").css({ 
      "border-right":"33px solid transparent", 
      "border-left":"0 solid transparent" 
     }); 

     } else { 
     $("#aNav div").css({ 
      "border-left":"33px solid transparent", 
      "border-right":"0 solid transparent" 
     }); 
     } 
    }); 
    }); 
}; 
$(document).ready(function(){ 
    nav(); 
}); 

您可能还需要检查动画功能齐全的外部属性像你

Answer 3

试着像以前就.....完整动画可能工作... ..

$lefter.animate({ 
    left: parseInt($lefter.css('left'),10) == 0 ? 
      -$lefter.outerWidth() : 
      0 
    }, 
    complete: function() { 
     left = $("nav").css("left"); 
    if(left == 0) { 
     $("#aNav div").css({ 
      "border-right":"33px solid transparent", 
      "border-left":"0 solid transparent" 
     }); 

    } else { 
     $("#aNav div").css({ 
      "border-left":"33px solid transparent", 
      "border-right":"0 solid transparent" 
      }); 
     } 

    }); 
    }); 

Answer 4

在data()设置一个标志，并使用该以跟踪点击次数，因为它更准确：

$(document).ready(function() { 
    $('#aNav').on('click', function() { 
     var nav = $("nav"), 
      left = !$(this).data('state') ? ~nav.outerWidth() : 0; 

     nav.animate({left: left}, 600); 
     $(this).data('state', !$(this).data('state')) 
       .find('div').css({ 
        borderRight : (left===0?33:0)+'px solid transparent', 
        borderLeft : (left===0?0:33)+'px solid transparent', 
       } 
     ); 
    }); 
});