jQuery-händelse - toggle()-metoden

Exempel

Växla olika bakgrundsfärger:

$(\
  function(){
  (\
  function(){
  $("body").css("background-color","red");}
  function(){
  $("body").css("background-color","yellow");}
);

Prova själv

Definition och användning

toggle() metoden används för att binda två eller fler eventhanteringsfunktioner för att svara på轮流 click-händelser för valda element.

Denna metod kan också användas för att växla mellan valda elementets hide() och show() Metod.

Binda två eller fler funktioner till Toggle-händelsen

Växla mellan två eller fler funktioner när den specifika elementen klickas på.

Om två eller fler funktioner specificeras, kommer toggle() metoden att växla alla funktioner. Till exempel, om det finns tre funktioner, kommer den första klicket att anropa den första funktionen, det andra klicket anropa den andra funktionen, det tredje klicket anropa den tredje funktionen. Fjärde klicket anropar återigen den första funktionen, och så vidare.

Syntax

$(selector).toggle(function1(),function2(),functionN(),...)

Prova själv

Parametrar Beskrivning
function1() Obligatorisk. Funktionen som körs när elementet klickas på varje jämna gång.
function2() Obligatorisk. Funktionen som körs när elementet klickas på varje udda gång.
functionN(),... Valfri. Definierar andra funktioner som behöver växlas.

Växla Hide() och Show()

Kontrollera om varje element är synligt.

Om elementet redan är dolt, kör show(). Om elementet är synligt, kör hide(). På så sätt kan du skapa en växlingseffekt.

Syntax

$(selector).toggle(speed,callback)

Prova själv

Parametrar Beskrivning
speed

Valfri. Definierar hastigheten för hide/show-effekten. Standard är "0".

Möjliga värden:

  • millisekunder (t.ex. 1500)
  • "slow"
  • "normal"
  • "fast"
callback

Valfri. Funktionen som körs när toggle() metoden är klar.

För att lära sig mer om callback, besök vår Callback-funktionstutorial

Visa eller dölj element

Definierar om endast alla matchande element ska visas eller döljas.

Syntax

$(selector).toggle(switch)

Prova själv

Parametrar Beskrivning
switch

Obligatorisk. Boolean, definierar om toggle() endast ska visa eller endast dölja alla valda element.

  • true - Visa element
  • false - Dölj element