javascript - How can I make my menu expand all the subitems? -


i have list menu javascript code makes collapse , expand .onclick.

although make show 1 item because every time try new solution for loop or case can't work.

this 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 , 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 jsfiddle it.

i thinking for loop goes way trough each sub-menu category instance:

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

then doing each main menu giving each of them class menu1,menu2,menu3 etc.

next selects next sibling of selected element, 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/


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -