Bootstrap Collapse プラグインを垂直方向ではなく水平方向に折りたたむ方法はありますか? コードを見ると、この機能は組み込まれていないようですが、何か見落としているだけであることを願っています...
ご協力いただければ幸いです。ありがとうございます!
ベストアンサー1
JavaScript を変更したり追加したりせずに、これを非常に簡単に実行する方法を見つけました。
まず、すべての Twitter Bootstrap CSS の後に次の CSS を定義します。
.collapse {
height: auto;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}
次に、ターゲット要素 (クラスを定義する場所) に、アニメーション化するプロパティに応じて.collapse
クラスを追加する必要があります。.width
.height
最後に、あなたはしなければならない幅をアニメーション化する場合は、ターゲット要素の内容をラップし、その幅を明示的に定義します。高さをアニメーション化する場合、これは必要ありません。
実際の例はこちらをご覧ください ->http://jsfiddle.net/ud3323/ZBAHS/