Fant du et ferdig jQuery-snippet for en «Vis/Skjul»-knapp som ikke virker? Kode som bruker .toggle() ble skrevet etter en ti år gammel manual og sluttet stille å fungere i jQuery 1.9. For en nybegynner ser denne situasjonen ut som svart magi: konsollen er tom, ingen feil, knappen reagerer rett og slett ikke på et andre klikk.

Problemet er at .toggle()-metoden i jQuery hadde to liv. Det første, animert vis/skjul av elementer, lever fortsatt. Det andre, vekslende handlinger ved klikk, ble fjernet i 2013, men søkemotorer viser fortsatt gamle artikler som toppresultater. Her skal vi forklare hvorfor den gamle koden er død og skrive tre fungerende alternativer, fra et enkelt flagg til data-attributter for et dusin knapper samtidig.

💡 Rask oversikt:

• Hvorfor din .toggle(fn1, fn2) ikke virker og hvor du skal se etter utdatert kode
• Metode 1: en tilstandsvariabel for én enkelt knapp med minimal kode
• Metode 2: .data() når du har mange knapper og hver lever sitt eget liv
• Bonus: tre eller flere handlinger i en klikkjede ved hjelp av en teller
• Moderne .toggle() for animasjon, hva som gjenstår og hvordan du bruker det

Hva er.toggle() i jQuery og hvorfor gammel kode er død

Før jQuery 1.8 kunne .toggle()-metoden gjøre to forskjellige ting avhengig av argumentene som ble sendt inn. Hvis du sendte to funksjonsparametere, fungerte den som en veksler: første klikk kjørte den første funksjonen, andre klikk kjørte den andre, tredje klikk kjørte den første igjen, og så videre i en syklus.

Den så kompakt ut:

1
// Worked in jQuery before 1.8, removed in 1.9
2
$('#myButton').toggle(
3
  function() {
4
    $(this).text('Show categories').css('background', 'green');
5
  },
6
  function() {
7
    $(this).text('Hide categories').css('background', 'red');
8
  }
9
);

Nøyaktig denne koden har sirkulert i norskspråklige blogger frem til i dag. Problemet er at med lanseringen av jQuery 1.9 (januar 2013) ble denne formen for .toggle() fullstendig fjernet. Årsaken: metodens doble formål skapte forvirring, og nybegynnere kunne ikke forstå hvorfor .toggle() noen ganger animerte og andre ganger vekslet handlinger.

I dag gjør .toggle() bare én ting: viser eller skjuler et element med animasjon. For vekslende handlinger må utvikleren eksplisitt håndtere tilstand.

Metode 1: tilstandsvariabel

Den mest direkte tilnærmingen er å opprette en boolsk variabel og veksle den i .click()-behandleren. Egnet for én enkelt knapp eller elementer med delt vekslingslogikk.

Legg til koden i din temaskriptfil (via wp_enqueue_script i functions.php) eller i en <script>-blokk før avsluttende </body>:

1
let isFirstClick = true;
2
 
3
$('#toggleBtn').on('click', function() {
4
  const $btn = $(this);
5
 
6
  if (isFirstClick) {
7
    $btn.text('Hide categories');
8
    $('#contentBlock').show(700);
9
    isFirstClick = false;
10
  } else {
11
    $btn.text('Show categories');
12
    $('#contentBlock').fadeOut('slow');
13
    isFirstClick = true;
14
  }
15
});

Her lagrer isFirstClick den nåværende tilstanden utenfor behandleren. Første klikk viser blokken og setter flagget til false, andre klikk skjuler den og returnerer flagget tilbake. Ingen magi: du vet nøyaktig hvilken handling som vil skje nå og hvilken som vil skje neste gang.

Fordelen med denne tilnærmingen er at flagget kan tilbakestilles fra hvor som helst i programmet. For eksempel, etter et AJAX-kall ønsker du å returnere knappen til sin opprinnelige tilstand, bare bruk isFirstClick = true.

Ulempen er én variabel for alle knapper. Hvis siden har to uavhengige vekslere med klassen .toggleBtn, vil isFirstClick-variabelen deles av begge. For et slikt scenario, bruk metode 2.

Metode 2: jQuery data-attributter

Når du har flere uavhengige knapper (for eksempel, hvert produkt i en katalog har sin egen spesifikasjonsblokk), må du lagre tilstand direkte på DOM-elementet. .data()-metoden fester vilkårlige data til et element uten å forurense det globale skopet.

Last skriptet på samme måte, via wp_enqueue_script eller i footeren:

1
$('.toggle-btn').on('click', function() {
2
  const $btn = $(this);
3
  const hasClicked = $btn.data('clicked') || false;
4
 
5
  if (!hasClicked) {
6
    $btn.text('Hide specifications').css('background', '#f0f0f0');
7
    $btn.next('.specs-block').show(400);
8
    $btn.data('clicked', true);
9
  } else {
10
    $btn.text('Show specifications').css('background', '#fff');
11
    $btn.next('.specs-block').fadeOut(300);
12
    $btn.data('clicked', false);
13
  }
14
});

Å kalle $btn.data('clicked') leser tilstanden til denne spesifikke knappen. Ti knapper på siden betyr ti isolerte tilstander. Ingen konflikter.

Merk: .data() jobber med jQuerys minne, ikke med HTML data-*-attributter. Hvis du trenger at tilstanden overlever en sidelasting, skriv i tillegg $btn.attr('data-clicked', 'true') og les via .attr().

Bonus: tre eller flere handlinger i en kjede

Hva om det ikke skal være to, men tre klikk? For eksempel: første trykk viser blokken, andre endrer innholdet, tredje skjuler den. Her oppretter du, i stedet for et boolsk flagg, en numerisk teller:

1
$('#multiBtn').on('click', function() {
2
  const $btn = $(this);
3
  let count = $btn.data('clickCount') || 0;
4
 
5
  switch (count) {
6
    case 0:
7
      $btn.text('Step 1: show block');
8
      $('#targetBlock').show(500);
9
      break;
10
    case 1:
11
      $btn.text('Step 2: load data');
12
      $('#targetBlock').load('/ajax-content');
13
      break;
14
    case 2:
15
      $btn.text('Step 3: hide');
16
      $('#targetBlock').fadeOut(400);
17
      count = -1; // next click will become case 0 again
18
      break;
19
  }
20
 
21
  $btn.data('clickCount', count + 1);
22
});

Å tilbakestille telleren (count = -1) gir mening hvis kjeden skal gå i sløyfe. Hvis handlingen er engangs, fjern bare tilbakestillingen, så vil ingenting skje etter det tredje klikket.

Moderne.toggle() for animasjon

Formen for .toggle() som overlevde er strengt ansvarlig for elementsynlighet. Uten argumenter er det øyeblikkelig veksling. Med varighet animerer den bredde, høyde og opasitet samtidig.

Grunnscenario: en «Vis/Skjul meny»-knapp:

1
$('#menuToggle').on('click', function() {
2
  $('#mainMenu').toggle('slow', function() {
3
    // callback after animation completes
4
    console.log('Animation complete');
5
  });
6
});

Strengene 'fast' og 'slow' gir henholdsvis 200 og 600 millisekunder. Du kan sende et eksakt tall: .toggle(400) betyr 400 ms.

Et nyttig triks: å tvinge tilstand via en boolsk parameter. .toggle(true) viser alltid elementet, og .toggle(false) skjuler det alltid. Dette er praktisk i kombinasjon med et eksternt flagg fra metode 1:

1
let visible = true;
2
$('#toggleBtn').on('click', function() {
3
  visible = !visible;
4
  $('#content').toggle(visible);
5
});

Koden leses lineært: flagget snus, elementet tar den påkrevde tilstanden. Ingen betinget if/else rundt synlighet.

⁉️🤔 Ofte stilte spørsmål

Hvorfor viser ikke min gamle kode med .toggle(fn1, fn2) feil i konsollen?

Den gamle formen for .toggle() ble fjernet på metodenivå: jQuery finner rett og slett ikke en slik signatur og gjør stille ingenting. Konsollen er tom fordi å kalle .toggle(fn1, fn2) for moderne jQuery er et syntaktisk korrekt, men meningsløst kall (argumenter ignoreres). Sjekk din jQuery-versjon: hvis den er 1.9 eller høyere, er den gamle koden død.

Kan jeg inkludere jQuery Migrate og slippe å skrive om koden?

Teknisk sett, ja. Plugin-en jQuery Migrate gjenoppretter fjernede metoder, inkludert den gamle .toggle(). Men dette er en midlertidig krykke: Migrate legger til ~10 KB minifisert og er designet for en overgangsperiode, ikke permanent bruk. Hvis nettstedet kjører på WordPress og jQuery lastes fra kjernen, er Migrate allerede der for bakoverkompatibilitet. Men å stole på den i din egen kode anbefales ikke: den kan deaktiveres når som helst av en tema- eller plugin-oppdatering.

Hva er best, en variabel eller et data-attributt?

For én enkelt knapp, bruk en variabel (mindre kode). For flere uavhengige knapper eller dynamisk tilføyde elementer, bruk .data() (tilstandsisolasjon). Hvis knapper legges til via AJAX etter sidelasting, bruk delegering: $(document).on('click', '.toggle-btn', function() { ... }).

Virker.toggle() på mobile enheter?

Ja. Moderne .toggle() (animasjon) og alle klikkbehandlere fra denne artikkelen fungerer korrekt på berøringshendelser. jQuery normaliserer click for mobile nettlesere siden sine tidligste versjoner. Den eneste nyansen: på iOS før versjon 12 hadde elementer uten cursor: pointer et forsinket klikk, men dette problemet løses med én CSS-linje touch-action: manipulation for knappen.

Hvor bør jeg plassere jQuery-kode i WordPress?

Tre alternativer. Raskt: Code Snippets-pluginen: sett inn JS-kode i et snippet med type «JavaScript», så lastes den automatisk i footeren. Riktig: opprett en fil js/toggle.js i ditt child theme, registrer den via wp_enqueue_script('my-toggle', get_stylesheet_directory_uri() . '/js/toggle.js', array('jquery'), '1.0', true) i functions.php. Parameteren true på slutten sender skriptet til footeren, noe som er standard for kode som jobber med DOM-en. Ikke legg <script> direkte i innleggsteksten; WordPress-editoren vil strippe taggen.

Hvilken tilnærming du bør velge for ditt prosjekt

Hvis du har én knapp med tekstveksling og blokksynlighet, bruk en tilstandsvariabel. Tre linjer, gjennomsiktig oppførsel, triviell feilsøking.

Hvis det er flere vekslere (katalog, innstillingspanel, liste over utvidbare elementer), bruk kun .data(). En global variabel for flere knapper vil skape en tilstandskappløp som du vil bruke lengre tid på å feilsøke enn det tar å skrive koden med metode 2.

En kjede på tre eller flere steg krever en teller med switch. Ikke kompliser med boolske flagg det som naturlig passer med tall.

Viktigst av alt, hvis du finner en artikkel i søkeresultatene med .toggle(fn1, fn2), lukk fanen. jQuery lever, men den spesifikke metoden ble begravet i 2013.

Du kan friske opp kunnskapen om å kjøre JavaScript-snutter på sparket i vår artikkel om å jobbe med snutter i Chrome DevTools, som vil være nyttig for raskt å teste kode fra denne artikkelen.