Meu próprio acordeão jQuery
Pergunta
Ei pessoal, eu criei a seguinte estrutura de menu:
<div id="menu">
<ul>
<li><a href="#">Main Item1</a></li>
<li><a href="#">Main Item2</a></li>
<li><a href="#">Main Item3</a>
<ul>
<li><a href="#">SubItem for MainItem3</a></li>
<li><a href="#">2ndSub for MainItem3</a></li>
</ul>
</li>
<li><a href="#">Main Item4</a>
<ul>
<li><a href="#">SubItem for MainItem4</a></li>
<li><a href="#">2ndSub for MainItem4</a></li>
</ul>
</li>
</ul>
</div>
Então essa é a minha estrutura de menu. Agora eu quero usar o jQuery mais recente para fazer o efeito slide/slidown.
Eu faço da seguinte maneira:
$(document).ready(function(){
$('#menu ul li:has(ul)').mouseenter(function(){
$('#menu ul li ul').slideDown('slow');
}).mouseleave(function(){
$('#menu ul li ul').slideUp('slow');
});
});
Eu tentei o MouseOver e o MouseOut pela primeira vez, mas quando usei essa função, o MouseOver funcionou e, quando queria ir ao submarino, o menu deslizou, mas o Mouseout Event ocorre. Agora funcionou, mas quando eu passa o passar, por exemplo, no item principal 3, os submarinos também do item principal 4 abrem e fecharão no MouseOut?!?! Como dizer apenas os itens do menu do item principal 3 oder item principal 4 ???
Espero que você entenda o que quero dizer?
Obrigado
Solução
$(function(){
$('#menu ul li:has(ul)').hover(function(){
$(this).find('ul').slideDown('slow');
}, function(){
$(this).find('ul').slideUp('slow');
});
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow