Bootstrap_Javascript_accordion_html/css_WEB-ITnose

アコーディオンのトリガーは、カスタム data-toggle 属性を通じてトリガーできます。 data-toggle 値は collapse、data-target="#collapse 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 番目の部分は、panel-collapse スタイルを使用した折り畳み領域であるパネル コンテンツです。

<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 フレームワークでは、コンテンツ領域を非表示にしたい場合は、panel-collapse スタイルに collapse

を追加するだけで各パネルのコンテンツ領域が非表示になり、非表示になります。デフォルトでは、最初のパネルのコンテンツが表示されます。どうすればよいですか?実際、Bootstrap の作成者は、これを誰に対してもすでに考慮しています。必要なのは、崩壊の上に in スタイルを追加することだけです。インタラクティブな動作を完了するには、タイトル リンクの 2 つの属性をカスタマイズする必要があります。1 つは data-toggle で、その値は Collapse で、もう 1 つは data-target で、その値は各パネル コンテンツ領域の識別子です。この例では、それぞれ #panel1、#panel2、#panel3 です

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

注:

この場合、既に href="# があるため、data-target="#panel1" を追加しなくても大丈夫です。 panel1" ですが、ボタン button をトリガーとして使用する場合は、 data-target="#panel1" ステートメントを使用する必要があります。

ステップ 6

、data-parent 属性を定義します。これにより、要素の 1 つがクリックされると、すべての折りたたみ領域が閉じられ、クリックされた領域が開きます (クリックされた領域が表示されている場合は、閉まっている ）。このデータの親の値は、アコーディオン パネル コンテナの識別子と一致します。この例では #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">标题一</a></h4>    </div>    <div class="panel-collapse collapse in" id="panel1">        <div class="panel-body">折叠区内容...</div>    </div></div>