jQuery / Methode / .toggle() - Elemente ein- und ausblenden

jQuerys .toggle() verbirgt jedes angezeigte Element und zeigt jedes verborgene. .toggle(true) legt Anzeigen fest, .toggle(false) Verbergen; .toggle(800) animiert den Wechsel. Unterscheiden Sie Umkehren vom Festlegen eines bekannten Zustands.

Sofortiger Wechsel, Zustand und Animation

Die .toggle()-API ändert display ohne Argumente sofort. Bei sichtbarem Alpha und verborgenem Beta wird Alpha verborgen und Beta sichtbar. Die Menge wird nicht insgesamt auf denselben Zustand gesetzt.

Zeitgesteuerte Effekte ändern Breite, Höhe und Deckkraft. Nach dem Verbergen entfernt display:none den Layoutplatz. 800ms sind 0,8 Sekunden; höhere Werte sind langsamer. Boolesch false und die Zahl 0 sind verschiedene Argumentformen. Verbergen löscht keine Eingaben oder Zustände des Document Object Model (DOM).

Vollständiges Beispiel mit zwei Bereichen

Speichern Sie alles in UTF-8 als toggle-demo.html und öffnen Sie die Datei im Browser. Internet lädt die offizielle vollständige jQuery-Datei 4.0.0 vom Content Delivery Network (CDN). Für zeitgesteuerte Effekte benötigen Sie das effects-Modul, also keine Slim-Version. Bedienung und Konsolencode wurden mit 3.7.1 und 4.0.0 ausgeführt.

Alpha ist mit flex sichtbar, Beta anfangs verborgen. Bedienelemente bleiben außerhalb. Wählen Sie sofort, 800ms, 200ms oder 0ms. Während eines Effekts ignoriert busy zusätzliche Wechsel. Bei bevorzugter reduzierter Bewegung verwendet der Effekt Dauer null.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle each panel visibility</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, input { font: inherit; margin: 4px; max-width: 100%; box-sizing: border-box; }
    .panel { padding: 12px; margin: 10px 0; border: 1px solid teal; background: #edf9f6; }
    #alpha { display: flex; flex-wrap: wrap; align-items: center; }
    #beta { display: none; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Toggle independently or set a known state</h1>
  <label for="mode">Mode:</label>
  <select id="mode"><option value="instant">No arguments</option><option value="800">800ms</option><option value="200">200ms</option><option value="0">0ms</option></select>
  <button type="button" id="toggle">Toggle each</button>
  <button type="button" id="show">Show both</button>
  <button type="button" id="hide">Hide both</button>
  <button type="button" id="reset">Reset</button>
  <div id="panels">
    <div class="panel" id="alpha">Alpha <input aria-label="Alpha note" value="Keep this note"></div>
    <div class="panel" id="beta">Beta panel</div>
  </div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const $panels = $("#panels > .panel");
      let busy = false, completed = 0;
      function report() {
        const visible = $panels.filter(":visible").map(function () { return this.id; }).get();
        $("#result").text(`visible=${visible.join(",") || "(none)"}\ncompleted=${completed}\nbusy=${busy}\nDOM panels=${$panels.length}`);
      }
      function settle() { $panels.stop(true, true); busy = false; completed = 0; }
      $("#toggle").on("click", function () {
        if (busy) return;
        completed = 0;
        const mode = $("#mode").val();
        if (mode === "instant") { $panels.toggle(); report(); return; }
        if (!$panels.length) { report(); return; }
        busy = true; report();
        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        $panels.toggle({ duration: reduced ? 0 : Number(mode), complete: function () {
          completed++;
          if (completed === $panels.length) busy = false;
          report();
        } });
      });
      $("#show").on("click", function () { settle(); $panels.toggle(true); report(); });
      $("#hide").on("click", function () { settle(); $panels.toggle(false); report(); });
      $("#reset").on("click", function () {
        settle(); $("#alpha").toggle(true); $("#beta").toggle(false);
        $("#alpha input").val("Keep this note"); $("#mode").val("instant"); report();
      });
      report();
    });
  </script>
</body>
</html>

Anfangs ist nur Alpha sichtbar; beide Bereiche bleiben im Dokument.

visible=alpha
completed=0
busy=false
DOM panels=2

1. Bei No arguments zeigt Toggle each nur Beta, completed bleibt null. Nochmals zeigt Alpha.
2. Bearbeiten Sie Alphas Eingabe und blenden Sie sie aus und ein. Der Wert und die flex-Anzeige bleiben erhalten.
3. Bei 800ms gilt danach visible=beta, completed=2, busy=false. Der Rückruf läuft je Bereich, nicht einmal pro Menge.
4. Schnelle Klicks während des Effekts werden ignoriert, statt eine Warteschlange aufzubauen. Vergleichen Sie 200ms nach Reset unter gleichen Bedingungen.
5. Show both zeigt beide, Hide both verbirgt beide. Wiederholungen behalten den festgelegten Zustand.
6. Reset beendet laufende Effekte und stellt Alpha sichtbar, Beta verborgen, Eingabestandard und Modus wieder her. Die Eingabe ändert sich wegen ausdrücklichem .val(), nicht wegen Verbergen.

0ms sieht ähnlich aus wie ohne Argumente, ruft complete aber je Bereich auf: completed=2. Reduzierte Bewegung verwendet denselben Weg ohne globale Effekteinstellungen zu ändern. :visible während der Animation ist nicht zwangsläufig der Endzustand; prüfen Sie das Ergebnis nach Abschluss.

Boolesche Werte und Reset im laufenden Effekt

Übergeben Sie einen echten booleschen Wert für bedingte Anzeige. Zweimal true verbirgt nicht wieder. Prüfen Sie den folgenden Code in derselben Entwicklerkonsole; temporäre Elemente werden anschließend entfernt.

const $holder = $('<div><p>A</p><p>B</p></div>').appendTo("body");
const $items = $holder.find("p");
$items.toggle(false);
$items.toggle(false);
console.log(`hide twice visible=${$items.filter(":visible").length}`);
$items.toggle(true);
$items.toggle(true);
console.log(`show twice visible=${$items.filter(":visible").length}`);
console.log(`DOM count=${$items.length}`);
$holder.remove();

hide twice visible=0
show twice visible=2
DOM count=2

Ein bekannter Zustand während Animation erfordert Warteschlangen- und Zustandsverwaltung. settle() verwendet .stop(true, true), löscht wartende Effekte, beendet den laufenden und setzt danach busy sowie completed zurück. Das zweite true kann Rückrufe sofort ausführen; setzen Sie Zähler deshalb nach stop zurück.

Reset legt anschließend die bekannten Zustände fest. Bei Zwischengröße anzuhalten unterscheidet sich vom Abschluss am Ziel. Geprüft wurde auch Reset während Animation mit sofortigem argumentlosem Wechsel danach: Alpha wechselte korrekt zu Beta. Entscheiden Sie für andere Klickregeln zuerst zwischen Ignorieren, Warten und laufenden Effekt abschließen.

Unsichtbare Elemente und andere Effekte untersuchen

Prüfen Sie Selektor, .length und jQuery-Laden. Bei display:none eines Vorfahren muss .toggle(true) am Kind nicht sichtbar werden. Unterscheiden Sie visibility:hidden und opacity:0. toggle beseitigt nicht automatisch jede Unsichtbarkeitsursache.

Bei sofortigem Ende prüfen Sie Dauer, Bewegungspräferenz und Build. Wählen Sie passend zwischen nur Deckkraft, nur Höhe und gemeinsamen Größenänderungen. Schreiben Sie Zwischengrößen nicht ohne Zweck wiederholt als dauerhafte Styles zurück.

Planen Sie beim Verbergen eines fokussierten Bereichs Wiederöffnen und Fokusbewegung. Dieses Beispiel hält Bedienelemente außerhalb, implementiert aber keine vollständige Fokuswiederherstellung oder Zustandsansage. Sichtbarkeit allein vervollständigt nicht alle Interaktionen.