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