ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrapのアコーディオンエフェクトを詳しく解説
この記事では、Bootstrap のアコーディオン エフェクトについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Bootstrap フレームワークの Collapse プラグイン (折りたたみ) は、実際には一般的なアコーディオン エフェクトです。トリガー要素をクリックすると、別の折りたたみ可能な領域に表示または非表示になり、再度クリックすると表示状態を反転できます。古典的なシナリオは、複数の折りたたみ領域のアコーディオン スタイルと、単一のタイトル/コンテンツのスタイルです。 [関連する推奨事項: "bootstrap チュートリアル "]
<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>
<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-Headingで、その中にタイトル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 で、その値は各パネル コンテンツ領域の識別子です。 ID。この例では、それぞれ #panel1、#panel2、#panel3 です:
[注]
を追加しなくても問題ありません。この場合、すでに href="#panel1"
がありますが、ボタンがトリガーとして使用される場合は、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 属性を定義して、要素の 1 つがクリックされると、すべての折りたたみ領域が閉じてから、クリックされた領域が開きます (クリックされた領域が表示されている場合は、閉じられます) )。このデータの親の値は、アコーディオン パネル コンテナの識別子と一致します。たとえば、この例では #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 つの手順を通じて、次の点をまとめることができます # ☑ パネルのpanel-titleをトリガー要素として、panel-bodyの親要素を折りたたみ領域として使用します;
☑ アコーディオン効果を実現するには、複数のパネルを含めるpanel-groupを使用します。
☑ 各パネルのトリガー要素は、data-parent 属性を指定する必要があります。data-parent 属性の値は、パネル グループ スタイル要素の ID またはその他のスタイル識別子に対応します。
☑ Trigger 要素は data-toggle を指定する必要があり、その値は Collapse;
☑ Trigger 要素は data-target 属性を指定する必要があります。 data-target 属性の値は、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 トリガー
#[キーワード]$(element).collapse('show');//显示折叠区域 $(element).collapse('hide');//隐藏折叠区域 $(element).collapse('toggle');//反转折叠区域
<button>显示折叠区域</button> <button>隐藏折叠区域</button> <button>反转折叠区域</button> <div> <div> <div> <h4><a>标题一</a></h4> </div> <div> <div>折叠区内容一</div> </div> </div> <div> <div> <h4><a>标题二</a></h4> </div> <div> <div>折叠区内容二</div> </div> </div> <div> <div> <h4><a>标题三</a></h4> </div> <div> <div>折叠区内容三</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>
[イベント]
このプラグ-in は 4 種類のイベント サブスクリプションをサポートしています
show.bs.collapse show方法调用之后立即触发该事件 shown.bs.collapse 此事件在collapse已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发 hide.bs.collapse hide方法调用之后立即触发该事件。 hidden.bs.collapse 此事件在collapse被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
<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" data-html="标题一" 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" data-html="标题二" 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" data-html="标题三" href="#panel3">标题三</a></h4> </div> <div id="panel3" class="panel-collapse collapse"> <div class="panel-body">折叠区内容三</div> </div> </div> </div> <script> $(function(){ $("#accordion").on("show.bs.collapse",function(e){ var $element = $(e.target).siblings().first().find('a'); $element.html($element.data('html') + '[折叠区已打开]'); }).on("hide.bs.collapse",function(e){ var $element = $(e.target).siblings().first().find('a'); $element.html($element.data('html') + '[折叠区已关闭]'); }) }); </script>
プログラミング関連の知識の詳細については、
プログラミング入門をご覧ください。 !
以上がBootstrapのアコーディオンエフェクトを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。