如何使用onclick显示/隐藏菜单

请让我帮助我修复代码，我试图显示具有onclick功能的隐藏菜单，并显示具有onclick功能的相同菜单，但是我的问题是，当我单击菜单时会显示但不会显示在下次点击时隐藏.

我尝试过的事情:



< pre lang ="HTML">
< div id ="toggle" onclick ="toggle()">< a href =#">
< div class ="toggle" onclick ="toggle()"></div>
< div class ="toggle" onclick ="toggle()"></div>
< div class ="toggle" onclick ="toggle()"<//div></a>
</div>

< div id ="tutorials-header-list">
< ul id =菜单">
< li id ="list-1001">< a href =#"> Home</a></li>
< li id ="list-1002">< a href =#"> About-us</a></li>
< li id ="list-1003">< a href =#">库</a></li>
< li id ="list-1004">< a href =#">语法规则</a></li>
< li id ="list-1005">< a href =#"> Online-Calculators</a></li>

</ul>

</div>


</pre>




#tutorials-header-list ul li {
float:left;
margin-right:40px;
display:inline-block;
位置:相对；
底部:0px；
高度:50px;
宽度:100％;
text-align:left;
line-height:40px;
text-transform:uppercase;
box-shadow:0px 0px 0px 0px;
}

#menu {
显示:无；
}



var el = document.getElementById(''menu'');
函数toggle(){

如果(el.style.display ==``none''){
el.style.display =``block'';

}其他{
el.style.display =``无'';

}


}

please i want someone to help me fix my code, i am trying to show a hided menu with onclick function and as well show the same menu with onclick,but my problem is that when i click the menu will show but will not hide on the next click.

What I have tried:



<pre lang="HTML">
<div id = "toggle" onclick = "toggle()"><a href = "#">
<div class = "toggle" onclick = "toggle()"></div>
<div class = "toggle" onclick = "toggle()"></div>
<div class = "toggle" onclick = "toggle()"></div></a>
</div>

<div id = "tutorials-header-list">
<ul id = "menu">
<li id = "list-1001"><a href="#">Home</a></li>
<li id = "list-1002"><a href="#">About-us</a></li>
<li id = "list-1003"><a href="#">Library</a></li>
<li id = "list-1004"><a href="#">grammar-rule</a></li>
<li id = "list-1005"><a href="#">Online-Calculators</a></li>

</ul>

</div>


</pre>




#tutorials-header-list ul li{
float:left;
margin-right:40px;
display:inline-block;
position:relative;
bottom:0px;
height:50px;
width:100%;
text-align:left;
line-height:40px;
text-transform:uppercase;
box-shadow:0px 0px 0px 0px;
}

#menu{
display:none;
}



var el = document.getElementById(''menu'');
function toggle(){

if (el.style.display == ''none'') {
el.style.display = ''block'';

}else{
el.style.display = ''none'';

}


}