Bootstrapのアコーディオンエフェクトを詳しく解説-ブートストラップのチュートリアル-php.cn

この記事では、Bootstrap のアコーディオンエフェクトについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrapのアコーディオンエフェクトを詳しく解説

Bootstrap フレームワークの Collapse プラグイン (折りたたみ) は、実際には一般的なアコーディオンエフェクトです。トリガー要素をクリックすると、別の折りたたみ可能な領域に表示または非表示になり、再度クリックすると表示状態を反転できます。古典的なシナリオは、複数の折りたたみ領域のアコーディオンスタイルと、単一のタイトル/コンテンツのスタイルです。 [関連する推奨事項: "bootstrap チュートリアル "]

構造

##アコーディオンの最も重要な部分は、各タイトルがコンテンツは、Bootstrap フレームワークでは、これら 2 つの部分を組み合わせたものをパネルと呼びます。以下の効果に示すように、3 つのパネルがあります。これら 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>

ログイン後にコピー

Bootstrapのアコーディオンエフェクトを詳しく解説

宣言タイプトリガー

トリガーアコーディオンは、カスタム data-toggle 属性を通じてトリガーできます。 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-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 です:

[注]

data-target="#panel1"

を追加しなくても問題ありません。この場合、すでに 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 トリガー

Bootstrapのアコーディオンエフェクトを詳しく解説

#[キーワード]

$(element).collapse('show');//显示折叠区域 $(element).collapse('hide');//隐藏折叠区域 $(element).collapse('toggle');//反转折叠区域
ログイン後にコピー
<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>
ログイン後にコピー

[イベント]

このプラグ-in は 4 種類のイベントサブスクリプションをサポートしています Bootstrapのアコーディオンエフェクトを詳しく解説

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(&#39;a&#39;);
        $element.html($element.data(&#39;html&#39;) + &#39;[折叠区已打开]&#39;);
    }).on("hide.bs.collapse",function(e){
        var $element = $(e.target).siblings().first().find(&#39;a&#39;);
        $element.html($element.data(&#39;html&#39;) + &#39;[折叠区已关闭]&#39;);
    })

});    
</script>

ログイン後にコピー

プログラミング関連の知識の詳細については、

プログラミング入門

をご覧ください。！

以上がBootstrapのアコーディオンエフェクトを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。