Twitter Bootstrap手风琴全高度窗格 [英] Twitter Bootstrap accordion full height panes

问题描述

我一直困扰自己，使用 twitter bootstrap手风琴：

我要实现的功能是：

• 使用bootstrap作为基本框架，


• 有固定顶部navbar，


• 宽度/高度内容w / o滚动条，


• 有3个单独的可折叠内容窗格（总是只有一个展开），


• 点击标头部分展开内容窗格（并折叠先前展开的窗格）


• 只在一个展开的 >内容窗格的内容窗格（DIV 1 | 2 | 3 in pic），


• li>
  
• 每个内容窗格都有其可配置的最小高度（对于其标题），

真的很想在这方面得到一些帮助，因为我想我在这个问题上失去了意见： p>

使用额外的jQuery插件（如jQuery UI）是允许。

解决方案

HTML：

 < div class =ui-accordionid =accordion> 
< h4 class =ui-accordion-header> DIV1< / h4> 
< div class =ui-accordion-contentid =accordion-div1>< / div> 
< h4 class =ui-accordion-header> DIV2< / h4> 
< div class =ui-accordion-contentid =accordion-div2>< / div> 
< h4 class =ui-accordion-header> DIV3< / h4> 
< div class =ui-accordion-contentid =accordion-div3>< / div> 
< / div> 
  

CSS：
（无特殊）

$ b b

JS：

  $（＃accordion）。accordion（{
 heightStyle：fill 
}）; 
  

I've been troubling myself to achieve this with twitter bootstrap accordion:

Generally, using the accordion (bootstraps collapse plugin) is not a must.

What I want to achieve is to:

• use bootstrap as base framework,
• have fixed-top navbar,
• have full width/height content w/o scrollbars,
• have 3 separate, collapsible content panes (with always only one being expanded),
• have clicking on header part expand the content pane (and collapsing the previously expanded one),
• have scrolling occur only in the one expanded content pane (DIV 1|2|3 in pic),
• when content panes are collapsed, to have their overflow hidden,
• have each content pane have its configurable min-height (for its "header"),
• have this properly working for responsive layouts.

Would really love to get some help on this as I think I'm loosing my mind over this :(

The use of additional jQuery plugins (like jQuery UI) is "allowed".

解决方案

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: (nothing special)

JS:

$("#accordion").accordion( {
  heightStyle : "fill"
});

这篇关于Twitter Bootstrap手风琴全高度窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！