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

Question

当用户单击另一个折叠面板时，我试图使Bootstrap手风琴保持在相同的高度。如果内容变得太大，pannel应该点击空格来获得手风琴的全部高度，并使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/

我希望这是你要搜索的内容;）