Twitter Bootstrap手风琴全高度窗格

Sar*_*ran 12 jquery html5 css3 twitter-bootstrap

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

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

我想要达到的目的是:

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

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

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

Sar*_*ran 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>
Run Code Online (Sandbox Code Playgroud)

CSS:(没什么特别的)

JS:

$("#accordion").accordion( {
  heightStyle : "fill"
});
Run Code Online (Sandbox Code Playgroud)

  • 作为澄清,这是引用 jQuery UI 插件 [Accordion](http://jqueryui.com/accordion/#fillspace) 而不是 Bootstrap [Collapse](http://getbootstrap.com/javascript/#collapse),这可能是有效的替代,但不会具有相同的样式或使用 Bootstrap 用户可能期望的数据属性。 (4认同)