Question

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

那已经很好了。

但是现在我想要的是，点击的元素（#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

看起来您可能在动画期间检查导航的左侧属性，其中不是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 demo

要使左边的值为整数，可以使用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',
                }
        );
    });
});

javascript if和else的问题

4 个答案: