带有以下代码的汉堡菜单在 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

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