如何让我的菜单扩展所有子项？

Question

I have a list menu with some JavaScript code that makes it collapse and expand .onClick .

Although I could only make it show 1 item because every time I try a new solution like a for loop or case I can't get it to work.

This is my current code:

<ul id="navigation">
    <li class="main"><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 class="main"><a>Hardware</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha2"> › Instalação/Configuração de Periféricos </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha3"> › Limpeza interna/externa </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha4"> › Cooling Pack </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha5"> › Performance Pack </a></li>
    <li class="main"><a>Software</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so1"> › Actualização de Sistema Operativo </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so2"> › Instalação de Sistema Operativo </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so3"> › Instalação de Drivers e Aplicações </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so4"> › Configurações de internet e redes wireless </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so5"> › Legalize o seu PC </a></li>
    <li class="main"><a>Backup</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba1"> › Backup de dados até 4GB </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba2"> › Backup and Go </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba3"> › Suportes Danificados </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba4"> › Recuperação de dados sem intervenção física </a></li>
    <li class="main"><a>Segurança</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_se1"> › Remoção de Vírus e Spyware </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_se2"> › Instalação de anti-vírus </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_se3"> › Configurações de Controlo Parental </a></li>
</ul>

$(function () {
    $("li.sub:not(:first)").hide();
    $("li.main a").click(function () {
        $("li.sub").slideUp("fast");
        $(this).parent("li.main").next("li.sub").slideDown("slow");
    });
});

Here is the jsFiddle for it.

I was thinking about a for loop that goes all the way trough each sub-menu category for instance:

for(var i=1; i<5; i++) {
    $(this).parent("li.main").next("li.sub_ha" + i).slideDown("slow");
}

Then doing this for each main menu giving each of them a class menu1,menu2,menu3 etc.

Answer 1

这应该这样做：

$(this).parent().parent().find("li.sub").slideDown("slow");

Answer 2

next only selects the next sibling of the selected element, you can use nextUntil mehod.

$(this).parent().nextUntil("li.main").slideDown("slow");

http://jsfiddle.net/ruf6z/

$(function() {
    var $subitems = $("li.sub");
    $subitems.not(':first').hide();

    $("li.main a").click(function() {
        var $targets = $(this).parent().nextUntil("li.main").slideDown("slow");
        $subitems.not($targets).slideUp("fast");
    });
});

http://jsfiddle.net/ruf6z/1/

Answer 3

It would be better to do this semantically. If you want to say the course, I would suggest giving each group of child items their own class. You can search for the class of the child items, and then use that class to find everything in your subgroup, and then run the .slideDown() method on that group.

I made a modified version of your fiddle that shows how to do this.