Latest web development tutorials

Bootstrap-fach (Collapse) Widget

Folding (Collapse) Plug-Ins können leicht, so dass die Fläche der Seite gefaltet werden. Egal, ob Sie es verwenden, um Inhalte zu erstellen oder die Navigationsleiste kollabieren, die eine Menge von Inhalten Optionen ermöglicht.

Wenn Sie auf die einzelnen Plug-in - Funktionen beziehen möchten, müssen Siecollapse.js zu verweisen.Zur gleichen Zeit, auch müssen Sie Ihre Version von Bootstrap in Bezug zu nehmen Transition (Übergang) Stecker . Oder, wie Bootstrap - Plugin Übersicht Kapitel erwähnt, können Sie aufbootstrap.jsoder komprimierte Version vonbootstrap.min.js beziehen.

Sie können die Falte (Collapse) Plug-in verwendet werden:

  • ErstellenSieein Paket oder zusammenklappbar Akkordeon (Akkordeon),wie folgt:

    Beispiele

    <Div class = "Panel-Gruppe" id = "Akkordeon"> <Div class = "Panel Panel-default" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseOne"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. Teil 1 </ a> </ H4> </ Div> <Div id = "collapseOne" class = "Panel-Zusammenbruch Zusammenbruch in "> <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> <Div class = "Panel Panel-default" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseTwo"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. Teil 2 </ a> </ H4> </ Div> <Div id = "collapseTwo" class = "Panel-Zusammenbruch Zusammenbruch" > <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> <Div class = "Panel Panel-default" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseThree"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. Teil 3 </ a> </ H4> </ Div> <Div id = "collapseThree" class = "Panel-Zusammenbruch Zusammenbruch" > <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> </ Div>

    Versuchen »

    Die Ergebnisse sind wie folgt:

    Faltflügel
    1. Daten-Toggle = "Kollaps" der Komponenten auf den Link , den Sie auf oder reduzieren erweitern möchten hinzugefügt.
    2. href oder Daten-target- Attribut an die übergeordnete Komponente, ist sein WertIDSubkomponenten.
    3. Daten-parent Eigenschaft Akkordeon (Akkordeon) auf die ID hinzuzufügen , um die Verbindungsanordnung zu erweitern oder zu reduzieren.
  • ErstellenSieeine einfache Markierung ohne Leporello Montage (zusammenklappbar),wie unten dargestellt:

    Beispiele

    <Taste type = "button" class = "BTN BTN-primary" Daten-Toggle = "Kollaps" Daten-target = "#demo"> einfache Falzaufbau </ button> <Div id = "Demo" class = "Zusammenbruch"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div>

    Versuchen »

    Die Ergebnisse sind wie folgt:

    Einfach faltbar Komponenten

    Wie Sie im Beispiel sehen können, haben wir eine zusammenklappbare Baugruppen und Panel Falten (Akkordeon) verschieden sind , fügen wir nicht dieAttributdaten-Eltern.

Verwendung

Die folgende Tabelle listet die Klasse-fach (Collapse) Plug-in für schwere versenkbare Verarbeitung:

Class描述实例
.collapse隐藏内容。 尝试一下
.collapse.in显示内容。 尝试一下
.collapsing当过渡效果开始时被添加,当过渡效果完成时被移除。 

Sie können die Falte (Collapse) Plug-in auf zwei Arten verwendet werden:

  • Durch die Datenattribute:fügen SieDaten-Toggle = "Kollaps"undDaten-Ziel- Element, die automatische Verteilung Steuer zusammenklappbar Elemente.Daten-target - Attribut akzeptiert einen CSS - Selektor, und ihre Anwendungen werden wirksam falten.Stellen Sie sicher ,Klasse .collapse zusammenklappbar Elemente hinzuzufügen.Wenn Sie es möchten standardmäßig geöffnet sein, fügen eine zusätzlicheKlasse .in.

    Paketmanagement ähnlich wie ein zusammenklappbares Akkordeon Steuerelemente hinzufügen, eineDatenattributdaten-parent = "# Selektor" hinzufügen .

  • Durch JavaScript: den Zusammenbruch JavaScript - Methode zu aktivieren , wie folgt:
    $ ( '. Collapse'). Collapse ()
    

Optionen

Es gibt einige Optionen durch Datenattribute oder JavaScript zu übergeben. Die folgende Tabelle enthält die folgenden Optionen:

选项名称类型/默认值Data 属性名称描述
parentselector
默认值:false
data-parent如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类。
toggleboolean
默认值:true
data-toggle切换调用可折叠元素。

Weg

Hier sind einige gefaltet (Collapse) Plug-in nützliche Möglichkeiten:

方法描述实例
Options:.collapse(options)激活内容为可折叠元素。接受一个可选的 options 对象。
$('#identifier').collapse({
	toggle: false
})
Toggle:.collapse('toggle')切换显示/隐藏可折叠元素。
$('#identifier').collapse('toggle')
Show:.collapse('show')显示可折叠元素。
$('#identifier').collapse('show')
Hide:.collapse('hide')隐藏可折叠元素。
$('#identifier').collapse('hide')

Beispiele

Das folgende Beispiel veranschaulicht das Verfahren:

Beispiele

<Div class = "Panel-Gruppe" id = "Akkordeon"> <Div class = "Panel Panel-default" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseOne"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. Teil 1 --hide Methode </ a> </ H4> </ Div> <Div id = "collapseOne" class = "Panel-Zusammenbruch Zusammenbruch in "> <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> <Div class = "Tafel Panel-Erfolg" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseTwo"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. Teil 2 --alle Methode </ a> </ H4> </ Div> <Div id = "collapseTwo" class = "Panel-Zusammenbruch Zusammenbruch" > <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> <Div class = "Tafel Panel-info" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseThree"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. Teil 3 --toggle Methode </ a> </ H4> </ Div> <Div id = "collapseThree" class = "Panel-Zusammenbruch Zusammenbruch" > <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> <Div class = "Tafel Panel-Warnung" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseFour"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. Teil 4 --options Methode </ a> </ H4> </ Div> <Div id = "collapseFour" class = "Panel-Zusammenbruch Zusammenbruch" > <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> </ Div> <Script>
$ (Funktion () {$ ( '#collapseFour'). Collapse ({ Knebel: false })}); $ (Funktion () {. $ ( '#collapseTwo') Collapse ( 'show')}); $ (function () {$ ( '#collapseThree') Collapse ( "Toggle").}); $ (Funktion () {. $ ( '#collapseOne') Collapse ( "verstecken")});
</ Script>

Versuchen »

Die Ergebnisse sind wie folgt:

Folding (Collapse) Plug-in Verfahren

Ereignis

Die folgende Tabelle listet die Falte (Kollaps) Plug-in für den Fall verwendet werden. Diese Ereignisse können, wenn die Hook-Funktion verwendet werden.

事件描述实例
show.bs.collapse在调用 show 方法后触发该事件。
$('#identifier').on('show.bs.collapse', function () {
	// 执行一些动作...
})
shown.bs.collapse当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
$('#identifier').on('shown.bs.collapse', function () {
	// 执行一些动作...
})
hide.bs.collapse当调用 hide 实例方法时立即触发该事件。
$('#identifier').on('hide.bs.collapse', function () {
	// 执行一些动作...
})
hidden.bs.collapse当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
$('#identifier').on('hidden.bs.collapse', function () {
	// 执行一些动作...
})

Beispiele

Das folgende Beispiel demonstriert die Verwendung des Ereignisses:

Beispiele

<Div class = "Panel-Gruppe" id = "Akkordeon"> <Div class = "Tafel Panel-info" > <Div class = "panel-Überschrift"> <H4 class = "Panel-title"> <A Daten-Toggle = "Kollaps" Daten-parent = "#accordion" href = "#collapseexample"> Klicken Sie mich erweitert werden, klicken Sie auf ich wieder gefaltet. --shown Ereignis </ a> </ H4> </ Div> <Div id = "collapseexample" class = "Panel-Zusammenbruch Zusammenbruch" > <Div class = "Panel-body"> Nihil Anim Keffijeh helvetica, Handwerk Bier labore Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur Metzger vice Lomo. </ div> </ Div> </ Div> </ Div> <Script>
$ (Funktion () {$ ( '#collapseexample'). Ein ( 'show.bs.collapse', function () { alert ( 'Hey, wenn Sie erweitern Aufforderungen diese Warnung');}) });
</ Script>

Versuchen »

Die Ergebnisse sind wie folgt:

Folding (Collapse) Plug-in-Ereignis