Verwenden von Bootstrap, um einen Akkordeoneffekt zu erzielen

Die vorherigen Wörter

Das Collapse-Plugin (Falten) im Bootstrap-Framework ist eigentlich unser gemeinsamer Akkordeoneffekt. Wenn auf ein Triggerelement geklickt wird, wird es in einem anderen ausblendbaren Bereich angezeigt oder ausgeblendet, und der Anzeigestatus kann bei erneutem Klicken umgekehrt werden. Die klassische Szene ist der Akkordeonstil mehrerer Faltbereiche und der Stil eines einzelnen Titels/Inhalts. In diesem Artikel wird der Bootstrap-Akkordeoneffekt

Struktur

ausführlich vorgestellt Der kritischste Teil des Akkordeons, das heißt, jeder Titel entspricht einem Teil des Inhalts. Im Bootstrap-Framework werden diese beiden Teile als Panel bezeichnet Wenn drei Felder miteinander verbunden sind, handelt es sich um eine Kombinationsfeldgruppe, d. h. um die Struktur des Akkordeons. Einfach ausgedrückt handelt es sich um einen Auslöser und einen Faltbereich

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button><div id="demo" class="collapse in">折叠区</div>

<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="#collapseOne">标题一</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">标题一对应的内容</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">标题二对应的内容</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">标题三</a></h4></div><div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">标题三对应的内容</div></div></div></div>

Deklarative Auslösung

Auslösung des Akkordeons kann über das benutzerdefinierte Datenumschaltattribut ausgelöst werden. Der Daten-Umschaltwert ist auf „Reduzieren“ eingestellt, data-target="#folding Area Identifier". Schauen wir uns als nächstes ein einfaches Beispiel an

Schritt 1: Entwerfen Sie eine Panel-Kombination mit drei Faltbereichen

Schritt 2: Geben Sie dem Panel Inhalt, jedes Panel besteht aus zwei Teilen, der erste ist die Panel-Überschrift des Panel-Titels und der darin enthaltene Panel-Titel. Der zweite Teil ist der Panel-Inhalt, also der Faltbereich, im Panel-Collapse-Stil

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"></div><div class="panel panel-accordion panel-default"></div><div class="panel panel-accordion panel-default"></div></div>

Schritt 3: Um den Titel und den Inhaltsbereich miteinander zu verbinden, müssen Sie kann Ankerlinks verwenden Methode, Titelbereich und Panelbereich miteinander verbinden

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title">标题一</h4></div><div class="panel-collapse"><div class="panel-body">折叠区内容...</div></div></div>

Schritt 4: Steuern Sie, ob der Panelinhaltsbereich sichtbar ist. Wenn Sie möchten, dass der Inhaltsbereich im Bootstrap-Framework unsichtbar ist, müssen Sie nur „collapse“ zum Stil „panel-collapse“ hinzufügen. Wenn Sie möchten, dass der Inhaltsbereich standardmäßig sichtbar ist, müssen Sie den Stil „collapse“ und „in

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel2">标题二</a></h4></div><div class="panel-collapse" id="panel2"><div class="panel-body">折叠区内容...</div></div></div>......</div>

Schritt 5: Aktivieren Sie das Akkordeon-Interaktionsverhalten. Um das interaktive Verhalten zu vervollständigen, müssen Sie zwei Attribute im Titellink anpassen. Das eine ist data-toggle und das andere ist data-target, und sein Wert ist die Kennung jedes Panel-Inhaltsbereichs, z ID. In diesem Beispiel sind es #panel1, #panel2 und #panel3:

[Hinweis] Es ist in diesem Fall in Ordnung,

nicht hinzuzufügen, da es bereits

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1">标题一</a></h4></div><div class="panel-collapse collapse" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>

an der Vorderseite gibt , aber hier ist eine Schaltfläche. Als Auslöser müssen Sie die

-Anweisung

data-target="#panel1"href="#panel1" verwenden. Schritt 6: Definieren Sie das data-parent-Attribut, sodass, wenn eines der Elemente angeklickt werden, werden alle Faltbereiche geschlossen und anschließend der angeklickte Bereich geöffnet (oder geschlossen, wenn der angeklickte Bereich angezeigt wird). Dieser übergeordnete Datenwert entspricht der Kennung des Accordion-Panel-Containers. Dieses Beispiel bezieht sich beispielsweise auf #myAccordiondata-target="#panel1"

<div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4></div><div class="panel-collapse collapse in" id="panel1"><div class="panel-body">折叠区内容...</div></div></div>

Durch die oben genannten 6 Schritte können die folgenden Punkte erreicht werden zusammengefasst

　☑ Verwenden Sie den Panel-Titel des Panels als Auslöseelement und das übergeordnete Element des Panel-Körpers als Faltbereich

<div class="panel-group" id="myAccordion"><div class="panel panel-accordion panel-default"><div class="panel-heading"><h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a></h4></div>…

　☑ Verwenden Sie eine Panel-Gruppe, um mehrere Panels zu enthalten um einen Akkordeoneffekt zu erzielen;

　☑ Jedes Triggerelement im Panel muss das data-parent-Attribut angeben. Der Wert des data-parent-Attributs entspricht der ID oder einer anderen Stilkennung des Panel-Gruppen-Stilelements ;

　☑ Das Triggerelement „Data-Toggle“ muss angegeben werden, und der Wert lautet „collapse“. Das Attribut entspricht der ID oder einem anderen Stilbezeichner des übergeordneten Elements des Panel-Körpers. Wenn es sich um ein Element handelt, können Sie das href-Attribut anstelle von

JS-Trigger

<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="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div>

[Schlüsselwort]

【Ereignis】

<span style="color: #000000;">$(element).collapse('show');//显示折叠区域
$(element).collapse('hide');//隐藏折叠区域
$(element).collapse('toggle');//反转折叠区域<br></span>

Dieses Plug-in unterstützt 4 Arten von Ereignissen. Abonnieren

显示折叠区域隐藏折叠区域反转折叠区域<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="#panel1">标题一</a></h4></div><div id="panel1" class="panel-collapse collapse in"><div class="panel-body">折叠区内容一</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel2">标题二</a></h4></div><div id="panel2" class="panel-collapse collapse"><div class="panel-body">折叠区内容二</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#panel3">标题三</a></h4></div><div id="panel3" class="panel-collapse collapse"><div class="panel-body">折叠区内容三</div></div></div></div><script>$(function(){
    $('#btn1').click(function(){
        $('.collapse').collapse('show');
    })
    $('#btn2').click(function(){
        $('.collapse').collapse('hide');
    })
    $('#btn3').click(function(){
        $('.collapse').collapse('toggle');
    })
})</script>

show.bs.collapse        show方法调用之后立即触发该事件
shown.bs.collapse   　　 此事件在collapse已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.collapse        hide方法调用之后立即触发该事件。
hidden.bs.collapse    　此事件在collapse被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

Das obige ist der detaillierte Inhalt vonVerwenden von Bootstrap, um einen Akkordeoneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!