Html 如何使列表菜单“可折叠”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16004875/
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
How can i make a list menu "collapsible"?
提问by Bruno Charters
i have a menu with 4 main items and each one having 3 to 5 sub items.
我有一个菜单，有 4 个主要项目，每个项目有 3 到 5 个子项目。
<ul id="navigation">
<li><a>Diagonóstico</a>
</li>
<li class="sub"><a href="javascript:void(0);" class="sub_di1"> ? Grátis (na compra de qualquer servi?o) </a>
</li>
<li><a>Hardware</a>
</li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha1"> ? Instala??o/Configura??o de Componentes</a>
Please check the full code.
请检查完整代码。
As you can see in the jsFiddle, all menu items, when clicked show some text in another div. I put that there just in case it was be needed for further javascript help. What i want is to have all .sub menus collapsed and when i mouseoverone of the main ones, it expands the corresponding .sub items so user can see. Thanks!
正如您在 jsFiddle 中看到的那样，所有菜单项在单击时都会在另一个 div 中显示一些文本。我把它放在那里以防万一需要进一步的javascript帮助。我想要的是折叠所有 .sub 菜单，当我将鼠标悬停在主要菜单之一上时，它会展开相应的 .sub 项目，以便用户可以看到。谢谢！
EDIT:
编辑：
I managed to get a nice tutorial in one of the comments and came up with THIS!
我设法在其中一条评论中获得了一个不错的教程，并想出了这个！
What i need now is a way to show ALL the .sub menus from the corresponding .main menus instead of only the first ones.
我现在需要的是一种从相应的 .main 菜单中显示所有 .sub 菜单的方法，而不仅仅是第一个菜单。
回答by Jo?o Mosmann
Using only HTML and CSS.
仅使用 HTML 和 CSS。
HTML
HTML
<ul id="menu">
<li><a href="SOME_LINK">Some menu without sub-menu</a></li>
<li><a href="SOME_LINK2">Some menu without sub-menu 2 </a></li>
<li>Some menu WITH sub-menu
<ul>
<li><a href="SOME_LINK">Some sub-menu</a></li>
<li><a href="SOME_LINK">Some sub-menu 2</a></li>
</ul>
</li>
<li><a href="SOME_LINK3">Some menu without sub-menu 3</a></li>
</ul>
CSS
CSS
ul>li>ul{display:none}
ul>li:hover>ul, ul>li:selected>ul{display:block}
JS (jQuery) to OPEN all submenus
JS (jQuery) 打开所有子菜单
$('#menu li>ul').parent().addClass('selected');
JS without Jquery
没有 Jquery 的 JS
var menus = document.getElementById('menu').getElementsByTagName('li')
for(var row in menus){
if(typeof menus[row] == 'object' && menus[row].getElementsByTagName('ul').length > 0){
menus[row].getElementsByTagName('ul')[0].className = 'selected';
}
}
回答by wildthing
My solution is similar to the one mentioned in the question edit, but an already open list item does not re-open when beging clicked: http://jsfiddle.net/g5oc0uoq/
我的解决方案类似于问题编辑中提到的解决方案，但是单击时不会重新打开已经打开的列表项：http: //jsfiddle.net/g5oc0uoq/
$('.content').hide();
$('.listelement').on('click', function(){
if(!($(this).children('.content').is(':visible'))){
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.
如果您有性能问题，可以使用 show() 和 hide() 代替 slideUp() 和 slideDown()。
