jquery - 更改菜单垂直jquery的相等高度

Question

在具有三列的页面中，我使用了 equalheight 脚本来均衡列的高度，但是每次打开垂直手风琴菜单时，脚本都不会刷新所有列的高度。这是脚本的代码：

function equalHeight (blocks) {
var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;

 $(blocks).each(function() {

   $el = $(this);
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {

     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }

     rowDivs.length = 0;
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);

   } else {


     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

  }

   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }

 });

示例页面

http://www.esteticasilvia.it/responsive/index.shtml

感谢您的建议

Answer 1

您可以使用纯 CSS 布局，而不是使用脚本来实现相同的列高。

工作小提琴 测试： IE10、IE9、IE8、FF、Chrome、Safari

注意：小提琴中的脚本仅用于添加动态内容，以证明布局正常工作。

HTML：（非常简单）

<div id="Container">
    <div class="Column">Column 1</div>
    <div class="Column">Column 2</div>
    <div class="Column">Column 3</div>
</div>

CSS（也很简单）

#Container
{
    display: table;
    width: 100%;
}
.Column
{
    display: table-cell;
    width: 33%;
    background-color: azure;
    outline: 1px solid black;
}