包含以下代码的汉堡菜单在 jquery 中不起作用。我正在使用一个变量来检查它的状态

Question

我正在使用以下代码通过 jquery 打开和关闭汉堡包菜单。我想我弄乱了菜单状态变量或 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

你真的不需要更多了：

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>

Answer 2

更好的 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>

包含以下代码的汉堡菜单在 jquery 中不起作用。我正在使用一个变量来检查它的状态

hamburger menu with following code is not working in jquery. I'm using a variable to check its status

jquery

hamburger-menu