Das beste Bootstrap-fach (Collapse) Widget-Tutorial im Jahr 2024. In diesem Tutorial können Sie
Beispiele,Beispiele,Verwendung,Optionen,Weg,Beispiele,Ereignis,Beispiele, lernen
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:
- Daten-Toggle = "Kollaps" der Komponenten auf den Link , den Sie auf oder reduzieren erweitern möchten hinzugefügt.
- href oder Daten-target- Attribut an die übergeordnete Komponente, ist sein WertIDSubkomponenten.
- 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:
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 属性名称 | 描述 |
parent | selector 默认值:false | data-parent | 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类。
|
toggle | boolean 默认值: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:
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 () {
// 执行一些动作de.
})
|
shown.bs.collapse | 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 |
$('#identifier').on('shown.bs.collapse', function () {
// 执行一些动作de.
})
|
hide.bs.collapse | 当调用 hide 实例方法时立即触发该事件。 |
$('#identifier').on('hide.bs.collapse', function () {
// 执行一些动作de.
})
|
hidden.bs.collapse | 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。 |
$('#identifier').on('hidden.bs.collapse', function () {
// 执行一些动作de.
})
|
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: