Twitter Bootstrap 手风琴全高窗格答案

【问题标题】：Twitter Bootstrap accordion full height panesTwitter Bootstrap 手风琴全高窗格
【发布时间】：2013-04-10 11:55:34
【问题描述】：

我一直在努力通过twitter bootstrap accordion 实现这一目标：

一般来说，使用手风琴（引导折叠插件）不是必须的。

我想要实现的目标是：

使用引导程序作为基础框架，
有固定顶部导航栏，
拥有完整的宽度/高度内容，不带滚动条，
有 3 个独立的、可折叠的内容窗格（始终只有一个被展开），
点击标题部分展开内容窗格（并折叠先前展开的），
仅在一个展开的内容窗格（图片中的DIV 1|2|3）中发生滚动，
当内容窗格折叠时，隐藏其溢出，
让每个内容窗格都有其可配置的最小高度（对于它的“标题”），
让此功能适用于响应式布局。

真的很想在这方面得到一些帮助，因为我想我正在失去理智:(

“允许”使用其他 jQuery 插件（如 jQuery UI）。

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

我可以通过一些 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 没有任何垂直填充或从设置的高度中删除该填充。

【讨论】：

会检查并通知您。谢谢。

【解决方案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"
});

【讨论】：

作为澄清，这是引用 jQuery UI 插件 Accordion 而不是 Bootstrap Collapse，这可能是一个有效的替换，但不会有相同的样式或使用数据属性 Bootstrap 用户可能会期待。

【解决方案3】：

谁有这方面的 Bootstrap 3 解决方案？

编辑（这似乎有效）：https://github.com/twbs/bootstrap/issues/2462

$('#accordion').collapse().height('auto');

【讨论】：