Skip to content
luglio 29, 2009 / Davide

jQuery: il metodo .toggle()

Che cosa fa?

Il metodo .toggle() accetta uno o più argomenti, ogn’uno dei quali è rappresentato da una funzione. Il primo click “scatenerà” la prima funzione, il secondo, la seconda funzione e così via. In sostanza si può dire che .toggle si comporta un po’ come uno switch.

La sintassi

.toggle( fn1, fn2,..fnx )

  • fn1, fn2,..fnx: rappresentano le funzione le funzioni che si scatenano a seconda del numero di click.

Esempio

L’esempio che andremo a fare per vedere le potenzialità di toggle() sarà molto semplice, ecco in cosa consiste: creare una pagina con all’interno due liste di animali (mammiferi e rettili) che appariranno o scompariranno al cliccare sul titolo.

toggle.html

Per prima cosa andiamo a creare la pagina toggle.html

toggle.html

toggle.html

Come potete notare alla riga 6 viene definito il link al file css, che vedremo dopo; mentre alla riga 7 “icorporiamo” la libreria jQuery. Dal rigo 8 al 25 si definiscono i comportamenti con il comando toggle(), sia per “Rettili” che per “Mammiferi”. Come detto in precedenza, ricordate che il primo click scatena la prima funzione (in questo caso viene applicata la classe “nascondi” alle due liste), mentre il secondo click la rimuove, rendendole quindi nuovamente visibili.

Il file toggle.css sarà così composto:

toggle.css

toggle.css

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: