javascript - javascript if 和 else 的问题

Question

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

这已经运行良好。

但现在我想要单击的元素（#aNav）本身获得一些更改的样式。无论是否显示 (nav) 元素，这些样式也应更改。再次单击时，不会执行 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();
});

我只希望执行 else 部分。也许有人可以帮忙。

Answer 1

看起来您可能在动画期间检查了 nav 的 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 2

像这样尝试......完整的动画可能会工作......

$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 3

jQuery 的css()方法会返回属性的值和单位，left所以它永远不会为 0：JSFiddle 演示

要使 left 中的值成为整数，您可以使用parseInt，它将解析直到遇到非数字值：

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

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',
                }
        );
    });
});