Bootstrap 5 Collapse

Bootstrap 5 Collapse kann Inhalte einfach anzeigen und ausblenden.

data-bs-toggleunddata-bs-targetDies sind benutzerdefinierte Datenattribute, mit denen das Verhalten von Komponenten und Zielelementen definiert wird.

1. data-bs-toggle-Attribut:

  • Wird verwendet, um das Verhalten der Komponente zu definieren und anzugeben, wann die Komponente ausgelöst wird.
  • Die einstellbaren Werte hängen vom jeweiligen Komponententyp ab, wie z. B."collapse"(Collapse-Menü),"modal"(Modal),"tab"(Tabs), usw.
  • data-bs-toggle="collapse"Wird verwendet, um das Aus- und Einklappen des Collapse-Menüs auszulösen.
  • data-bs-toggle="modal"Wird verwendet, um das Anzeigen und Ausblenden des Modals auszulösen.
  • data-bs-toggle="tab"Wird verwendet, um das Umschalten der Tabs auszulösen.

2. data-bs-target-Attribut:

  • Wird verwendet, um das Zielelement oder den Zielselektor der Komponente anzugeben.
  • Das Zielelement kann ein CSS-Selektor sein, der verwendet wird, um das spezifische Element zu identifizieren, auf dem gearbeitet werden soll.
  • Es kann auch eine angegebene Element-ID sein, beginnend mit#wie zum Beispieldata-bs-target="#myModal"。
  • data-bs-targetDas Attribut unddata-bs-toggleAttribut werden zusammen verwendet, um das Komponentenverhalten mit dem Zielelement zu verknüpfen.

Im folgenden Beispiel wird beim Klick auf die Schaltfläche durch das Attribut data-bs-toggle="collapse" das Collapse-Menü-Verhalten ausgelöst, und das Attribut data-bs-target="#demo" gibt an, dass das Zielelement des Collapse-Menüs das <div>-Element mit der ID demo ist.

Beispiel

<button data-bs-toggle="collapse" data-bs-target="#demo">Collapse</button> <div id="demo" class="collapse">Hier ist etwas Testinhalt...</div>

Selbst ausprobieren »

Beitragserklärung

.collapseDie Klasse wird verwendet, um ein einklappbares Element anzugeben (das <div> im Beispiel); nach dem Klicken auf die Schaltfläche wird zwischen Ausblenden und Anzeigen umgeschaltet.

Um das Ausblenden und Anzeigen von Inhalten zu steuern, müssen Sie dasdata-bs-toggle="collapse"-Attribut hinzufügen.data-target="#id"Das Attribut entspricht dem einklappbaren Inhalt (<div id="demo">).

Hinweis:Bei einem <a>-Element können Sie dashref-Attribut anstelle desdata-bs-target-Attributs verwenden:

Beispiel

<a href="#demo" data-bs-toggle="collapse">Collapse</a> <div id="demo" class="collapse">Hier ist ein Testinhalt...</div>

Selbst ausprobieren »

Standardmäßig ist der einklappbare Inhalt ausgeblendet. Sie können die.show-Klasse hinzufügen, damit der Inhalt standardmäßig angezeigt wird:

Beispiel

<div id="demo" class="collapse show">Hier ist ein Testinhalt...</div>

Selbst ausprobieren »

Das folgende Beispiel erweitert die Card-Komponente, um ein einfaches Akkordeon anzuzeigen.

Hinweis:Verwenden Sie dasdata-bs-parent-Attribut, um sicherzustellen, dass sich alle einklappbaren Elemente unter dem angegebenen übergeordneten Element befinden, sodass beim Anzeigen einer einklappbaren Option die anderen Optionen ausgeblendet werden.

Beispiel

<div id="accordion"> <div class="card"> <div class="card-header"> <a class="btn" data-bs-toggle="collapse" href="#collapseOne">Option Eins</a> </div> <div id="collapseOne" class="collapse show" data-bs-parent="#accordion"> <div class="card-body">#1 Inhalt: Beispiel-Tutorial -- Beim Lernen geht es nicht nur um Technologie, sondern auch um Träume!!!</div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">Option Zwei</a> </div> <div id="collapseTwo" class="collapse" data-bs-parent="#accordion"> <div class="card-body">#2 Inhalt: Beispiel-Tutorial -- Beim Lernen geht es nicht nur um Technologie, sondern auch um Träume!!!</div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">Option Drei</a> </div> <div id="collapseThree" class="collapse" data-bs-parent="#accordion"> <div class="card-body">#3 Inhalt: Beispiel-Tutorial -- Beim Lernen geht es nicht nur um Technologie, sondern auch um Träume!!!</div> </div> </div> </div>

Selbst ausprobieren »
Andere Erweiterungen