如何使用onclick显示/隐藏菜单 [英] How to use onclick to display/hide menu

问题描述

请让我帮助我修复代码，我试图显示具有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'';

}


}

推荐答案

Set your var el = document.getElementById(''menu''); inside the toggle() function.

给每个div分配ID，并在调用toggle()函数时使用this.id传递该div的ID.

然后在切换功能中访问此值，并获得如下所示的ID.

Hi,

Give ID to each div and while calling the toggle() function pass the ID of that div using this.id.

Then access this value in toggle function and get the ID as below.

功能切换(x)
{
x.style.display =``block'';
}

这应该可以..

function toggle(x)
{
x.style.display = ''block'';
}

This should work..

这篇关于如何使用onclick显示/隐藏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！