Twitter Bootstrap手风琴全高度窗格

Question

我一直在努力用twitter bootstrap手风琴来实现这个目标:

通常,使用手风琴(bootstraps collapse plugin)不是必须的.

我想要达到的目的是:

• 使用bootstrap作为基础框架,
• 有固定顶部导航栏,
• 有滚动条的全宽/高度内容,
• 有3个独立的,可折叠的内容窗格(总是只有一个被扩展),
• 点击标题部分展开内容窗格(并折叠以前展开的标题),
• 滚动仅在一个展开的内容窗格中发生(图中的DIV 1 | 2 | 3),
• 折叠内容窗格时,隐藏其溢出,
• 让每个内容窗格都具有可配置的最小高度(对于其"标题"),
• 这适用于响应式布局.

真的很想得到一些帮助,因为我觉得我对此失去了理智:(

使用额外的jQuery插件(如jQuery UI)是"允许的".

Answer 1

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"
});