\\ Aktuelles > allgemeine Entwicklung > Javascript und jQuery > Ersatz für $.toggle()

Ersatz für jQuery toggle

Ab Version 1.9 ist in jQuery die Funktion toggle() nicht mehr verfügbar. Damit sind dann einfache auf- und zuklapp Funktionen nicht mehr möglich. Warum toggle() entfernt wurde ist mir nicht ganz klar, aber es lässt sich auf recht einfache Art und Weise ersetzen.

$('h4').click(function() {
  var clicks = $(this).data('clicks'),
    sibling = $(this).next();
  
  if (clicks) {
    sibling.hide();
  } else {
    sibling.show();
  }

  $(this).data('clicks', !clicks);
});

Funktionsbeschreibung

Dieser Block sorgt dafür, das bei einem Klick auf die Überschrift vom Typ h4 das folgende Element aufgeklappt wird. Der Klick wird dann in der Überschrift gespeichert. Bei einem erneuten Klick wird der Zustand ausgelesen, abhängig davon das folgende Element geschlossen und der neue Zustand dann abgespeichert.

Das lässt sich dann beliebig wiederholen.

Erklärung

Anhand des Beispiels oben lässt sich festhalten, dass mit Hilfe der Speicherung des Klicks in data-clicks lässt sich abwechselnd die erste und die zweite Methode ausführen.

Soll mehr als nur eine Methode im Wechsel ausgeführt werden muss in data-clicks ein Zähler gespeichert werden. Dieser wird dann im if-Statements mit modulo n verglichen. Wobei n der Anzahl an durchzuwechselnde Methoden entspricht.

Heißt so viel wie, wenn 5 Methoden nacheinander durchwechseln werden sollen, muss im if-Statements clicks % 5 verwendet werden. Bei mehr als 2 Zuständen empfiehlt sich zur Übersichtlichkeit die Verwendung eines switch-Statements

$('h4').click(function() {
  var clicks = $(this).data('clicks'),
    sibling = $(this).next();
  
  switch (clicks % 5) {
    case 1:
      methode1();
      break;
    case 2:
      methode2();
      break;
    case 3:
      methode3();
      break;
    case 4:
      methode4();
      break;
    default:
      methode0();
      break;
  }  

  $(this).data('clicks', ++clicks);
});