javascript - 如何制作列表菜单 "collapsible"？

Question

我有一个包含 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>

请检查 full code .

正如您在 jsFiddle 中看到的，所有菜单项在单击时都会在另一个 div 中显示一些文本。我把它放在那里以防需要进一步的 javascript 帮助。我想要的是折叠所有 .sub 菜单，当我鼠标悬停 主要菜单之一时，它会展开相应的 .sub 项目，以便用户可以看到。谢谢!

编辑:

我设法在其中一条评论中找到了一个很好的教程，并提出了 THIS !

我现在需要的是一种方法来显示相应 .main 菜单中的所有 .sub 菜单，而不是仅显示第一个菜单。

Answer 1

仅使用 HTML 和 CSS。

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

ul>li>ul{display:none}
ul>li:hover>ul, ul>li:selected>ul{display:block}

JS (jQuery) 打开所有子菜单

$('#menu li>ul').parent().addClass('selected');

没有 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';
     }
}