CSS 将下拉菜单从悬停更改为 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11228165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change dropdown menu from hover to onclick
提问by Alaa Gamal
i am looking for dropdown menu ( onlcick )
我正在寻找下拉菜单（onlcick）
after many searches, finally i have found one
经过多次搜索，我终于找到了一个
but the problem is, the code i have is based on ( hover ) Not ( onclick )
但问题是，我拥有的代码基于（悬停）而不是（onclick）
i want convert the code to be onclick instead of hover, by javascript or css
我想通过javascript或css将代码转换为onclick而不是hover
My Code:
我的代码：
<style>
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
</style>
<ul class="dropdown">
<li><a href="./" class="dir">Download Drivers</a>
<ul>
<li><a href="./">Download Drivers</a></li>
<li><a href="./">Driver Widget</a></li>
<li><a href="./">NVIDIA Software</a></li>
</ul>
</li>
<li><a href="./">Shop</a></li>
<li><a href="./" class="dir">Products</a>
<ul>
<li><a href="./">Desktop</a></li>
<li><a href="./">Workstation</a></li>
<li><a href="./">Servers</a></li>
<li><a href="./">Motherboard</a></li>
</ul>
</li>
<li><a href="./" class="dir">Technologies</a>
<ul>
<li><a href="./">NVIDIA SLI</a></li>
<li><a href="./">NVIDIA Hybrid SLI</a></li>
</ul>
</li>
</ul>
</body>
</html>
回答by Dexter Huinda
Is this the effect you want? See fiddle here: http://jsfiddle.net/UQwJz/4/[edited]
这是你想要的效果吗？请参阅此处的小提琴：http: //jsfiddle.net/UQwJz/4/[编辑]
I have reinvented your css and made it simpler.
我重新设计了你的 css 并让它变得更简单。
回答by CosminO
1)Modify the css for the menus that you want to drop down, by adding a display:none;(this will make them not show up)
1）修改要下拉菜单的css，添加一个display:none;（这将使它们不显示）
2)Assign an idto the root menu item and another one which can be built using the first one to the list under the root item ( that you want to have dropped down)
2）将一个分配id给根菜单项，另一个可以使用第一个构建到根菜单项下的列表（您想要下拉）
3)in the same element declaration, have onclick=dropdown(). Example
3) 在同一个元素声明中，有onclick=dropdown(). 例子
<li id='menu1' onclick=dropdown()><ul id='menu1menu' >which will cal the dropdown function on clicking on that element.
<li id='menu1' onclick=dropdown()><ul id='menu1menu' >这将在单击该元素时调用下拉功能。
<li><a href="./" id='drivers' onclick=dropdown() class="dir">Download Drivers</a>
<ul id='driversmenu'>
<li><a href="./">Download Drivers</a></li>
<li><a href="./">Driver Widget</a></li>
<li><a href="./">NVIDIA Software</a></li>
</ul>
</li>
4)have this function: On click, the function will check if the ul under the li is displayed or not, then make it have an opposite display value. You can use the same function for all menus, granted that you give your uls the same id as the parent li+'menu'.
4）有这个功能：点击后，该功能会检查li下的ul是否显示，然后使其具有相反的显示值。您可以对所有菜单使用相同的功能，前提是您为 uls 提供与父 li+'menu' 相同的 id。
function dropdown()
{
if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
document.getElementById(window.event.srcElement.id+'menu').style.display='none';
}
else{
document.getElementById(window.event.srcElement.id+'menu').style.display='block';
}
};
