13

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

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

我想要实现的是：

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

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

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

4

3 回答 3

3

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

于 2013-05-14T13:58:32.593 回答
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"
});
于 2013-06-26T13:50:08.493 回答
0

有人对此有 Bootstrap 3 解决方案吗？

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

$('#accordion').collapse().height('auto');
于 2015-05-19T11:37:42.737 回答