Bootstrap が毎日学習する必要がある Collapse プラグイン_JavaScript スキル

折りたたみプラグイン を使用すると、ページ領域を簡単に折りたたむことができます。アコーディオン ナビゲーションやコンテンツ パネルの作成に使用する場合でも、多くのコンテンツ オプションが可能になります。
プラグインの機能のみを参照したい場合は、collapse.js を参照する必要があります。または、Bootstrap プラグインの概要 の章で説明したように、bootstrap.js またはbootstrap.min.js の圧縮バージョン。
1. 使用方法
次の表は、高度なスケーリングを処理するために Collapse プラグインで使用されるクラスのリストです。

Collapse プラグインは次の 2 つの方法で使用できます:

data-toggle="collapse" と data-target を data 属性 を介して要素に追加することで、折りたたみ可能な要素のコントロールを自動的に割り当てます。 data-target 属性は CSS セレクターを受け入れ、それに折りたたみ効果を適用します。必ずクラス .collapse を折りたたみ可能な要素に追加してください。デフォルトでオンにしたい場合は、追加のクラス .in を追加します。
アコーディオンのようなグループ管理を折りたたみコントロールに追加するには、データ属性 data-parent="#selector" を追加します。

JavaScript 経由: 次のように、JavaScript 経由で折りたたみメソッドをアクティブ化できます:
$('.collapse').collapse()

2. 例

コンテンツをクリックして折りたたむ。
//基本的な例

<button class="btn btn-primary" data-toggle="collapse"
data-target="#content">
 Bootstrap
</button>

<div class="collapse" id="content">
 <div class="well">
  Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由
  Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目前,Bootstrap 最新版本为 3.0 。
 </div>
</div>

//アコーディオン折り

<div class="panel-group" id="accordion">
 <div class="panel panel-default">
  <div class="panel-heading">

   <h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示，再点击我进行折叠，第一部分</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 href="#collapseTwo" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示，再点击我进行折叠，第二部分</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 href="#collapseThree" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示，再点击我进行折叠，第三部分</a></h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-body">
    这里是第三部分。
   </div>
  </div>
 </div>
</div>

//アコーディオンエフェクト

$('#collapseOne, #collapseTwo,#collapseThree, #collapseFour').collapse({
 parent : '#accordion',
 toggle : false,
}); 

//手動呼び出し

$('button').on('click', function() {
 $('#collapseOne').collapse({
  toggle : true,
 });
}); 

//折りたたみメソッドには、非表示、表示、切り替えの 3 つのパラメータも用意されています。

$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
$('button').on('click', function() {
 $('#collapseOne').collapse('toggle');
}); 

Collapse プラグインには 4 種類のイベントがあります。

//イベント、その他の同様のイベント

$('#collapseOne').on('show.bs.collapse', function() {
 alert('当 show 方法调用时触发');
});

この記事が、Bootstrap Collapse プラグインを学ぶすべての人にとって役立ち、インスピレーションとなることを願っています。