13

私はツイッターのブートストラップアコーディオンでこれを達成するために自分自身を悩ませてきました: 望ましい行動

一般に、アコーディオン (ブートストラップ折りたたみプラグイン) の使用は必須ではありません。

私が達成したいことは次のとおりです。

  • ベースフレームワークとしてブートストラップを使用し、
  • 固定トップ ナビゲーション バーを持っています。
  • スクロールバーなしで全幅/高さのコンテンツを持ち、
  • 折りたたみ可能な 3 つの独立したコンテンツ ペインがある (常に 1 つだけが展開されている)。
  • ヘッダー部分をクリックして、コンテンツ ペインを展開します(以前に展開したものを折りたたみます)。
  • 1 つの展開されたコンテンツ ペイン(図の DIV 1|2|3) でのみスクロールが発生するようにします。
  • オーバーフローを非表示にするために、コンテンツ ペインが折りたたまれている場合、
  • 各コンテンツ ペインに構成可能な最小高さ (「ヘッダー」用) を持たせる。
  • これがレスポンシブ レイアウトで適切に機能するようにします。

私はこれについて私の心を失っていると思うので、これについていくつかの助けを得ることが本当に大好きです:(

追加の jQuery プラグイン (jQuery UI など) の使用は「許可」されています。

4

3 に答える 3

3

私はいくつかのJSでこれを達成することができました:

var tabsHeight = $('.accordion-heading').outerHeight() * $('.accordion-heading').length;
var height = $('#your_accordion_container').innerHeight() - tabsHeight;

$('.accordion-inner').height(height - 1);

なぜそうする必要があるのか​​ は- 1まだわかりませんが、それがなければ.accordion-inner大きすぎました.

これを関数でラップし、ブラウザ ウィンドウのサイズが変更されるたびに呼び出すようにしてください。また.accordion-inner、垂直パディングがないことを確認するか、設定された高さからそのパディングを削除してください。

于 2013-05-14T13:58:32.593 に答える
2

HTML:

 <div class="ui-accordion" id="accordion">        
    <h4 class="ui-accordion-header">DIV1</h4>
    <div class="ui-accordion-content" id="accordion-div1"></div>
    <h4 class="ui-accordion-header">DIV2</h4>
    <div class="ui-accordion-content" id="accordion-div2"></div>
    <h4 class="ui-accordion-header">DIV3</h4>
    <div class="ui-accordion-content" id="accordion-div3"></div>
 </div>

CSS: (特別なことは何もありません)

JS:

$("#accordion").accordion( {
  heightStyle : "fill"
});
于 2013-06-26T13:50:08.493 に答える