jquery - Twitter Bootstrap Accordion 全高面板

Question

我一直在努力用 twitter bootstrap accordion 来实现这一目标:

一般来说，使用accordion(bootstraps collapse plugin)并不是必须的。

我想要实现的是:

• 使用 bootstrap 作为基础框架，
• 有固定顶部的导航栏，
• 没有滚动条的全宽/全高内容，
• 有 3 个独立的可折叠内容面板(始终只有一个展开)，
• 单击标题部分展开内容 Pane (并折叠之前展开的 Pane )，
• 仅在展开的内容 Pane (图片中的 DIV 1|2|3)中进行滚动，
• 当内容 Pane 折叠时，隐藏它们的溢出，
• 让每个内容面板都有可配置的最小高度(对于它的“标题”)，
• 让它正确地用于响应式布局。

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

“允许”使用额外的 jQuery 插件(如 jQuery UI)。

Answer 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 没有任何垂直填充或从设置的高度中删除该填充。