меню гамбургеров с помощью следующего кода не работает в jquery. Я использую переменную, чтобы проверить ее статус

Question

Я использую следующий код, чтобы открыть и закрыть меню гамбургера с помощью jquery. Я думаю, что я испортил либо переменную menustatus, либо условие if.

$(document).ready(function(){
var menustatus = 0;
if(menustatus==0){
    menustatus=1;
    $(".hamburgerMenuIcon").click(function(){
        $(".menu").css("display", "block");
    });
};
else{
    menustatus=0;
    $(".hamburgerMenuIcon").click(function(){
        $(".menu").css("display", "block");
    });
}

});

Answer 1

Лучшее CSS-решение:

ul.menu {
  display: none;
}

#toggle-menu {
  position: absolute;
  left: -10px;
  top: -10px;
  opacity: 0;
}
  #toggle-menu:checked ~ ul.menu {
    display: block;
  }
  
  #toggle-menu:checked ~ label.burger::after {
    content: ' ×';
  }

label.burger {
  cursor: pointer;
}

<input type="checkbox" id="toggle-menu" />
<label class="burger" for="toggle-menu">&#8942; Menu</label>
<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Answer 2

Тебе больше не нужно:

jQuery(document).ready(function(){
  jQuery(".hamburgerMenuIcon").click(function(){
          jQuery(".menu").slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="hamburgerMenuIcon">TOGGLE</button>

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>