JQuery

[de.blak 1]

Olá pessoal, fiz um menu, com sub-menus, e queria que quando o menu fosse clicado o submenu aparecesse, sei que é possivel, mais não to conseguindo, faz tempo que não escrevo em Jquery, alguém pode me ajudar? Ta ai o código:

<div id="menu">
    <div class="category">
    Acessórios
    <a href="#"><div class="subCategory">Teclados</div></a>
<a href="#"><div class="subCategory">HeadPhones</div></a>
<a href="#"><div class="subCategory">WebCam</div></a>
</div><!-- category -->

<div class="category">
    Processadores
    <a href="#"><div class="subCategory">Teclados</div></a>
<a href="#"><div class="subCategory">HeadPhones</div></a>
<a href="#"><div class="subCategory">WebCam</div></a>
</div><!-- category -->

<div class="category">
    Placas Mãe
    <a href="#"><div class="subCategory">Teclados</div></a>
<a href="#"><div class="subCategory">HeadPhones</div></a>
<a href="#"><div class="subCategory">WebCam</div></a>
</div><!-- category -->

<div class="category">
    Placas de Audio
    <a href="#"><div class="subCategory">Teclados</div></a>
<a href="#"><div class="subCategory">HeadPhones</div></a>
<a href="#"><div class="subCategory">WebCam</div></a>
</div><!-- category -->

<div class="category">
    Placas de Video
    <a href="#"><div class="subCategory">Teclados</div></a>
<a href="#"><div class="subCategory">HeadPhones</div></a>
<a href="#"><div class="subCategory">WebCam</div></a>
</div><!-- category -->
</div><!-- menu--> 

Agradeço desde já, boa noite.

[thyquevedo 6]

HTML:

<div id="menu">
  <div> <a href="#" class="abreMenu">Acessorios</a>
    <div class="submenu">
      <a href="#">Teclados</a>
      <a href="#">HeadPhones</a>
      <a href="#">WebCam</a>
    </div>
  </div>
</div>

 

JS:

$(".submenu").hide();
$("a.abreMenu").mouseover(function(){
  $(this).parent().find(".submenu").fadeIn();
});
$(".submenu").mouseleave(function(){
  $(".submenu").fadeOut();
});});

Fiz meio rápido, mas acho que é isso.

Uma dica: Não se coloca <div> dentro de <a>.

 

Da uma olhada: http://jsfiddle.net/thiagoquevedo/sJ9Vw/

 

Se não for isso avisa ai.

 

Abraço.

 

[ignoredxyz 17]

Altere o HTML para, por exemplo:

<div class="category">
    <span>Placas Mãe</span>
    <a href="#"><div class="subCategory">Teclados</div></a>
    <a href="#"><div class="subCategory">HeadPhones</div></a>
    <a href="#"><div class="subCategory">WebCam</div></a>
</div>

E com jQuery

$(document).on("click", ".category span", function() {
    $(".category a").finish().fadeOut(150);
    $(this).closest(".category").find("a").finish().fadeIn(150);
}).on("click", function() {
    if(!$(this).closest(".category"))
        $(".category a").finish().fadeOut(150);
});

[thyquevedo 6]

Não é correto colocar uma <div> dentro de um <a>, e isso nem vai passar no validador.