Heim > Artikel > Web-Frontend > Verwenden von Bootstrap, um einen Akkordeoneffekt zu erzielen
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
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
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>
<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
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>
<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]
<span style="color: #000000;">$(element).collapse('show');//显示折叠区域 $(element).collapse('hide');//隐藏折叠区域 $(element).collapse('toggle');//反转折叠区域<br></span>
<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!