Блог

По какой-то причине этот оператор if никогда не переходит к else . Когда я нажимаю на #drawer-drop, поле изменяется, но я никогда не смогу изменить его обратно. Я не вижу никаких ошибок консоли.

 #drawer{margin-top:-600px;}

$(document).ready(function(){
  $("#drawer-drop").click(function(){
    if($("#drawer").css('margin-top','-600px')){
       $('#drawer').css('margin-top','0px');
    }else{
       $('#drawer').css('margin-top','-600px');
    }
  });
});

<nav id="drawer">
  <h1>This will be a sweet menu.</h1>
</nav>

<a id="drawer-drop">MENU</a>
  

Ваша «ошибка» — вы помещаете внутри if оператора Setter .css( propertyName, value ) (тоже устанавливаете значение …) вместо Getter .css( propertyName ) (получаете значение …).

 if($("#drawer").css('margin-top') == "-5px"){
  console.log("Do something");
}
  

• Документы Jquery CSS() get : https://api.jquery.com/css/#css1

• Статья по теме: https://riptutorial.com/jquery/example/11775/css—геттеры и сеттеры

Базовый фрагмент:

 $(document).ready(function(){
  $("#drawer-drop").click(function(){
    console.log($("#drawer").css('margin-top'));
    if($("#drawer").css('margin-top') == "-5px"){
      /* Setter */
      $('#drawer').css('margin-top','0px');
      $('#drawer').css('background','red');
    }else{
     /* Setter */
      $('#drawer').css('margin-top','-5px');
      $('#drawer').css('background','blue');
    }
  });
});  

 #drawer{
  margin-top: 5px;
  background: red;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<nav id="drawer">
  <h1>This will be a sweet menu.</h1>
</nav>

<a id="drawer-drop" href="#">MENU</a>