Seguinte, estou tentando criar um menu apoiando-me em JQuery, está funcionando, porém gostaria de que quando um dos menus fosse aberto, caso haja outro já aberto, este se feche.
Como fazer? Todos os menus ficam sempre abertos, a não ser que o usuário o feche.
Abaixo o codigo do meu menu atual, não sei se é a melhor opção, mas...
JS:
$(document).ready(function(){ $("#roll ul.menu").addClass(" invisivel"); $("#roll h2").click(function(){ $(this).next("ul.menu").slideToggle("slow") .siblings("ul.menu:visible").slideUp("slow"); }); }); $(document).ready(function(){ $("#roll2 ul.menu").addClass(" invisivel"); $("#roll2 h2").click(function(){ $(this).next("ul.menu").slideToggle("slow") .siblings("ul.menu:visible").slideUp("slow"); }); });
Html:
<div id="roll"> <h2>Exemplos - 01 a 10</h2> <ul class="menu"> <li><a href="#">- Exemplo 1</a></li> <li><a href="#">- Exemplo 2</a></li> <li><a href="#">- Exemplo 3</a></li> </ul> </div> <div id="roll2"> <h2>Exemplos - 11 a 20</h2> <ul class="menu"> <li><a href="#">- Exemplo 1</a></li> <li><a href="#">- Exemplo 2</a></li> <li><a href="#">- Exemplo 3</a></li> </ul> </div>
Sendo dois ou mais menus eu preciso mesmo estar utilizando um mesmo codigo duas ou mais vezes mudando só o valor?
Grato.