崩壊プラグインを使用すると、ページ領域を簡単に折りたたむことができます。崩壊したナビゲーションまたはコンテンツパネルを作成するために使用するかどうかにかかわらず、多くのコンテンツオプションが可能になります。
プラグインの機能を個別に参照する場合は、collapse.jsを参照する必要があります。または、 bootstrapプラグインの概要の章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。使用法
次の表には、重いスケーリングを処理するための崩壊プラグインを示します。
2つの方法で崩壊プラグインを使用できます。
データ属性を介して： data-toggle = "collapse"を追加し、要素にデータターゲットを追加して、折りたたみ可能な要素にコントロールを自動的に割り当てます。データターゲットプロパティはCSSセレクターを受け入れ、崩壊効果を適用します。折りたたみ可能な要素にクラス.collapseを追加してください。デフォルトでオンにしたい場合は、追加のクラスを追加します。
折り畳み式のパネルのようなグループ化管理を折りたたみ可能なコントロールに追加するには、データプロパティDataParent = "＃selector"を追加します。
JavaScriptを介して：以下に示すように、崩壊法はJavaScriptを介してアクティブにすることができます。
$（'。Collapse '）。collapse（）
2。例
コンテンツはクリックして崩壊させることができます。
//基本的な例
<ボタンData-Toggle = "collapse" data-target = "＃content"> bootstrap </butth> <div id = "content"> <div> bootstrapは、Twitterが起動するフロントエンド開発のためのオープンソースツールキットです。 TwitterデザイナーのMark OttoとJacob Thorntonによって開発され、CSS/HTMLフレームワークです。現在、ブートストラップの最新バージョンは3.0です。 </div> </div>
//アコーディオンの折りたたみ
<div id = "accordion"> <div> <div> <h4> <a href = "＃collapsone" data-toggle = "collapse" data-parent = "＃accordion">私をクリックして表示してからクリックして、パート1 </a> </h4> </div> <div div = "collaseone"> <div> </div> </div> </div> <div> <hRef = "＃collapsetwo" data-toggle = "collapse" data-parent = "＃accordion">私をクリックして表示してからクリックして、パート2 </a> </h4> </div> <div> <div> <div> <div> <collapsetwo "> <div> </div> </div> </div> <div> <div> <h4> <a href = "＃collapseThree" data-toggle = "collapse" data-parent = "＃arcion">私をクリックして表示してから、パート3 </a> </h4> </div> <div> <div div = "collapsree"> <div> </div> </div> </div> </div>
//アコーディオン効果
$（ '＃collapseone、＃collapsetwo、＃collapsethree、＃collapsefour'）。
//手動で電話します
$（ 'button'）
//崩壊方法は、3つのパラメーターも提供します：非表示、表示、および切り替え。
$（ '＃collapseone'）。collapse（ 'hide'）; $（ '＃collapsetwo'）。collapse（ 'show'）; $（ 'button'）。
崩壊プラグインには4種類のイベントがあります。
//イベント、その他の類似点
$（ '＃collapseone'）。
この記事がBootstrap Collapseプラグインについて学ぶのに役立ち、刺激的であることを願っています。