Há um tempo atrás me deparei com essa situação no trabalho de ter que criar um menu drop down que mudasse a imagem na ação de clique. Escolhi o Jquery para criar essas ações devido a simplicidade da linguagem e os efeitos que ele tem são bem legais, dando uma suavidade na animação deixando a página bem harmônica.

Exemplo do código em funcionamento:



Então, logo abaixo, segue o HTML utilizado e o script. Vou detalhar linha por linha o que o script faz. Está pronto?

HTML

Menu 1

teste

teste

teste

Menu 2

teste

teste

teste

Menu 3

teste

teste

teste



Script




Explicando o HTML


A estrutura do HTML é a seguinte:
  • Os H3 serão os títulos do menu. Através deles é determinado qual conteúdo (submenu) será exibido.
  • As DIVs com a class “conteudo” são os submenus a serem exibidos quando o H3 for clicado. Todas as DIVs tem a mesma class para facilitar o aparecimento e o desapacimento do conteúdo, você entenderá isso melhor no script.


Agora o script:


Primeiramente vamos definir que o primeiro submenu já apareça aberto e o menu (H3) apareça com a seta para baixo (indicação de submenu aberto). Confira abaixo bem detalhadamente:

A primeira linha diz que todas as divs com a class conteúdo serão ocultas, menos a primeira. O primeiro submenu já aparece aberto ao abrir a página.
$(".conteudo:not(:first)").hide()

Na segunda linha diz para o primeiro H3 já aparecer com a imagem da seta para baixo, indicando que o submenu está aberto.
OBS: Reparem no HTML que o primeiro H3 está com id=”primeiro”, justamente para isso.
$("#primeiro").attr('src','imagens/seta_baixo.gif')

A terceira linha diz o que vai acontecer quando o H3 (título do menu) for clicado.
$("h3").click(function(){

Agora começa uma série de animações quando o H3 é clicado. Primeiro deve-se fechar todos os sub-menus e só depois disso mostrar o que foi clicado. Isso acontece nas linhas 4 e 5. Confira abaixo: A quarta linha diz, que todas as divs com a class conteúdo serão ocultas com o efeito de slide up, de baixo para cima e devagar.
$(".conteudo").slideUp("slow")

A quinta linha diz, que a imagem que está dentro de todos os H3, será alterada para seta de lado, indicando submenu fechado
$("img").attr('src','imagens/seta_lado.jpg')

Até aqui, todos os submenus foram fechados e todos os H3 tem a imagem seta de lado. Agora é a hora de mostrar o submenu e alterar a imagem do H3 clicado. Siga: A sexta linha diz que o próximo elemento do H3 clicado que tenha a class “conteudo” deve ser exibido com o efeito de slide down, de cima para baixo.
$(this).next(".conteudo").slideDown()

E a sétima e última linha diz para que a imagem desse H3 clicado seja alterada para seta para baixo. Reparem no HTML que o a imagem está dentro do H3, então, a imagem é filha de H3, por isso o .children.
$(this).children().attr('src','imagens/seta_baixo.gif')


Exemplo do código em funcionamento: