Neueste Web-Entwicklung Tutorials
 

Bootstrap JS Collapse


JS Collapse (collapse.js)

Erhalten Basis Stile und flexible Unterstützung für zusammenklappbar Komponenten wie Akkordeons und Navigation.

Plugin-Abhängigkeit: Einsturz erfordert die Übergänge Plugin in Ihrer Version von Bootstrap aufgenommen werden.

Ein Tutorial über Collapsibles, unsere lesen Bootstrap Collapse Tutorial .


The Collapse Plugin Classes

Klasse Beschreibung Beispiel
.collapse Blendet den Inhalt Versuch es
.collapse in Zeigt den Inhalt Versuch es
.collapsing Hinzugefügt, wenn der Übergang beginnt, und entfernt, wenn es fertig ist Versuch es

Via data-* Attribute

Fügen Sie einfach data-toggle="collapse" und ein Datenziel Element automatisch die Steuerung eines zusammenlegbaren Element zuordnen. Die Daten-target Attribut akzeptiert einen CSS-Selektor den Zusammenbruch zu beantragen. Achten Sie darauf, die Klasse Zusammenbruch die klappbare Element hinzuzufügen. Wenn Sie es offen auf die Standard möchten, fügen Sie die zusätzliche Klasse in.

Beispiel

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Some text..
</div>
Versuch es selber "

Tipp: Um die ziehharmonikaartige Gruppenmanagement einen zusammenlegbaren Steuerung, fügen Sie das Datenattribut hinzufügen data-parent="#selector" .


Via JavaScript

Aktivieren Sie manuell mit:

$('.collapse').collapse()

Schließen Optionen

Die Optionen können über Datenattribute oder JavaScript übergeben werden. Die Option Namen Daten-, wie in für Datenattribute, hängen Sie data-parent="" .

Name Art Standard Beschreibung
parentselectorfalse Alle zusammenklappbare Elemente unter dem angegebenen Elternteil wird geschlossen, wenn das zusammenklappbare Element dargestellt ist. (Ähnlich wie bei traditionellen Akkordeon Verhalten - dies ist abhängig von der Panel-Klasse) - Siehe unten Beispiel
togglebooleantrue Blendet das zusammendrückbare Element beim Aufruf

Collapse Methoden

Die folgende Tabelle listet alle verfügbaren Minimierungsmethoden.

Methode Beschreibung Versuch es
.collapse( options ) Aktiviert das zusammenklappbare Element mit einer Option. Siehe oben stehenden Optionen für gültige Werte
.collapse("toggle") Blendet das zusammenklappbare Element Versuch es
.collapse("show") Zeigt die zusammenklappbare Element Versuch es
.collapse("hide") Blendet das zusammenklappbare Element Versuch es

Collapse Veranstaltungen

Die folgende Tabelle listet alle verfügbaren Zusammenbruch Veranstaltungen.

Event Beschreibung Versuch es
show.bs.collapse Tritt ein, wenn das zusammenklappbare Element über gezeigt werden soll Versuch es
shown.bs.collapse Tritt ein, wenn das zusammenklappbare Element vollständig angezeigt wird (nach dem CSS-Übergänge abgeschlossen haben) Versuch es
hide.bs.collapse Tritt ein, wenn das zusammenklappbare Element etwa ist versteckt werden Versuch es
hidden.bs.collapse Tritt ein, wenn das zusammenklappbare Element vollständig verborgen ist (nachdem CSS-Übergänge abgeschlossen haben) Versuch es

Beispiele

Beispiele

Einfach zusammenklappbare

Im folgenden Beispiel wird eine Taste drücken Sie die Auf- und Zuklappen Inhalt eines anderen Elements:

Beispiel

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
  Simple collapsible
</button>

<div id="demo" class="collapse in">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
</div>
Versuch es selber "

Reduzierbare Palette

Das folgende Beispiel zeigt einen zusammenklappbaren Platte:

Beispiel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>
Versuch es selber "

Reduzierbare Liste Gruppe

Im Folgenden wird ein zusammenklappbares Panel mit einer Liste Gruppe innen:

Beispiel

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>
Versuch es selber "

Akkordeon

Das folgende Beispiel zeigt ein einfaches Akkordeon durch die Panel-Komponente erstreckt:

Hinweis: Die data-parent - Attribut stellt sicher , dass alle zusammenklappbare Elemente unter dem angegebenen Elternteil wird geschlossen, wenn eine der zusammenklappbare Element dargestellt ist.

Beispiel

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>
Versuch es selber "

Auf- und Zuklappen Toggle Symbol & Text

Im folgenden Beispiel wird das Öffnen / Schließen Text und Symbol beim Öffnen und Schließen des zusammenklappbaren Inhalt:

Beispiel

$(document).ready(function(){
  $("#demo").on("hide.bs.collapse", function(){
    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
  });
  $("#demo").on("show.bs.collapse", function(){
    $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
  });
});
Versuch es selber "

Oder Sie können CSS verwenden:

Beispiel

/* Icon when the collapsible content is shown */
.btn:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
}

/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
    content: "\e080";
}
Versuch es selber "