CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Bruno Charters
Bruno Charters

Reputation: 494

How can I make my menu expand all the subitems?

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.

Upvotes: 1

Views: 341

Answers (3)

Ram
Ram

Reputation: 144689

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/

Upvotes: 1

ckersch
ckersch

Reputation: 7687

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.

Upvotes: 1

Kenneth
Kenneth

Reputation: 28737

This should do it:

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

Upvotes: 1

Related Questions