Переменная всегда принимает значение false

Question

Я изучаю jQuery, и я просто проверяю, как работают события и условия. Я также использую Velocity.js для анимации. Вот код:

$(function() { 

$("#navBar").click(function() { 
    var isOpen = false; 
     if (isOpen == false){ 
     $(this).velocity({ height: 300}); 
      isOpen = true; 
      console.log(isOpen); 
      return false; 
     } 
     else{ 
     $(this).velocity({ height: 50}); 
      isOpen = false; 
      console.log(isOpen); 
     } 

    }); 

}); 

Я не знаю, почему это не работает. если условие выполняется и записывается в консоль, переменная имеет значение true. Но после второго щелчка продолжает работать условие if и возвращает isOpen true. Я не могу выполнить оператор else.

Answer 1

Объявить isOpen вне обработчика щелчка, как наличие его внутри обработчика будет делать это false всегда.

var isOpen = false; 

$("#navBar").click(function() { 

     if (isOpen == false){ 
     $(this).velocity({ height: 300}); 
      isOpen = true; 
      console.log(isOpen); 
      return false; 
     } 
     else{ 
     $(this).velocity({ height: 50}); 
      isOpen = false; 
      console.log(isOpen); 
     } 

    }); 

}); 

Answer 2

Потому что каждый раз isOpen = false;, так как вы объявляете его внутри click. Так просто держать его за пределами click event, как показано ниже:

$(function() { 
    var isOpen = false; //this here 
    $("#navBar").click(function() { 
     if (isOpen == false){ 
      $(this).velocity({ height: 300}); 
      isOpen = true; 
      console.log(isOpen); 
      return false; 
     } 
     else{ 
      $(this).velocity({ height: 50}); 
      isOpen = false; 
      console.log(isOpen); 
     } 
    }); 
});