Bootstrap を使用してアコーディオン効果を実現する-jsチュートリアル-php.cn

前の言葉

BootstrapフレームワークのCollapseプラグイン（折りたたみ）は、実際には私たちの一般的なアコーディオンエフェクトです。トリガー要素をクリックすると、別の折りたたみ可能な領域に表示または非表示になり、再度クリックすると表示状態を反転できます。古典的なシーンは、複数の折りたたみ領域のアコーディオンスタイルと、単一のタイトル/コンテンツのスタイルです。この記事では、Bootstrap アコーディオンエフェクトについて詳しく紹介します

構造

アコーディオンの最も重要な部分は、各タイトルが対応していることです。フレームワーク内のこれら 2 つの部分の組み合わせをパネルと呼びます。以下の効果に示すように、これら 3 つのパネルを組み合わせると、パネルの組み合わせがパネルグループになります。アコーディオンの構造

単純にトリガーと折り畳み領域です

<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>

ログイン後にコピー

宣言的トリガー

トリガーアコーディオンはカスタムデータトグルでトリガーできます属性。 data-toggle 値は折りたたみ、data-target="#folding area identifier" に設定されています。次に、簡単な例を見てみましょう

ステップ 1: 3 つの折りたたみ領域を持つパネルの組み合わせをデザインします

<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>

ログイン後にコピー

ステップ 2: コンテンツをパネルに追加します。各パネルには 2 つの部分が含まれます。最初の部分はパネルタイトルです。そしてその中にタイトルpanel-titleを追加します。 2 番目の部分は、パネル折りたたみスタイルを使用した折りたたみ領域であるパネルコンテンツです

<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>

ログイン後にコピー

ステップ 3: タイトルとコンテンツ領域を一緒にバンドルするために、アンカーを介してタイトル領域とパネル領域を接続できますリンクを一緒に

<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>

ログイン後にコピー

ステップ 4: パネルのコンテンツ領域を表示するかどうかを制御します。 Bootstrap フレームワークでは、コンテンツ領域を非表示にしたい場合は、パネル折りたたみスタイルに折りたたみを追加するだけです。コンテンツ領域をデフォルトで表示したい場合は、スタイルの折りたたみと in

を追加する必要があります。

<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>

ログイン後にコピー

ステップ 5: アコーディオンの対話型動作をアクティブ化します。インタラクティブな動作を完了するには、タイトルリンクの 2 つの属性をカスタマイズする必要があります。1 つは data-toggle で、その値は Collapse で、もう 1 つは data-target で、その値は各パネルコンテンツ領域の識別子です。この例では、それぞれ #panel1、#panel2、#panel3 です:

[注意] この場合、data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如里是button按钮作为触发器就必须使用data-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>

ログイン後にコピー

ステップ 6: data-parent 属性を定義して、いずれかの要素をクリックすると、すべての折りたたみ可能な領域が閉じられ、クリックされた領域が開きます (クリックされた領域が表示されている場合は閉じられます)。この data-parent 値は、アコーディオンパネルコンテナの識別子と一致します。たとえば、この例では #myAccordion

<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>…

ログイン後にコピー

を参照しています

上記の 6 つの手順を通じて、以下の点をまとめることができます

☑ のパネルタイトルを使用します。パネルをトリガー要素として使用し、パネル本体の親要素を折りたたみ領域として使用します

☑ アコーディオン効果を実現するには、パネルグループを使用します

☑ 各パネルのトリガー要素はデータを指定する必要があります。 -parent 属性、データ -parent 属性の値は、パネルグループスタイル要素の ID またはその他のスタイル識別子に対応します。

☑ トリガー要素は data-toggle を指定する必要があり、値は Collapse です。トリガー要素は data-target 属性、data-target を指定する必要があります。属性の値は、panel-body の親要素の ID またはその他のスタイル識別子に対応します。a 要素の場合は、href 属性を指定できます。代わりに

<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>

ログイン後にコピー

JSトリガー

【キーワード】

<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>

ログイン後にコピー

【イベント】

このプラグインは4種類のイベントサブスクリプションをサポートしています

りー

以上がBootstrap を使用してアコーディオン効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。