Question

当用户点击另一个折叠面板时，我尝试将Bootstrap手风琴保持在相同的高度。如果内容变得太大，pannels应该onclick包裹空间以获得手风琴全高度并使pannel内容可滚动。这是fiddle！

var header = $('.panel-heading');
var test = $(window).height() - (header.length*$('.panel-heading').height());
$('.panel-body').height(test);

Answer 1

我已经编辑了你的CSS，HTML和JS ..我不知道如何用JQuery做这个，所以我使用了普通的javascript：

var header = document.getElementsByClassName('panel-heading');
var headingheights = header.length * (header[0].offsetHeight + 18); 
var test = $(window).height() - headingheights;
$('.panel-body').height(test);

注意：所有Panelbodys必须具有相同的填充，所以我将你的列表包装在一个自己的div中，边距为-15px（与你的解决方案效果相同）

我在小提琴里面添加了一些评论供你解释......;）

看看这个小提琴：https://jsfiddle.net/hhcpuequ/11/

我希望这就是你要找的东西;）

Bootstrap将手风琴保持在同一高度

1 个答案: