Question

我有3个区块，我希望所有3个区块具有相同的高度，如果其中一个区块有更多内容，则其余区块应将高度调整为具有更多内容的区域。在每个块的内部还有另外3个块，我称之为函数。在调用函数之后，内部的所有3个块应该是相同的高度，从而产生相同高度的父块。父块内的块具有填充和边距，但我已使用border-box将填充包含在高度中。

我做了一个功能，但效果不好。有时候它有效，有时候不行，它很奇怪。

$.fn.equalizeHeights = function() {
  var maxHeight = 0;

  this.each(function() {
    if ($(this).outerHeight() > maxHeight) {
      maxHeight = $(this).outerHeight();
    }
  });

  return this.each(function() {
    $(this).animate({
      height: maxHeight
    }, 300);
  });
};



function boxesHeight() {
  $('.main-blocks .block .icon').equalizeHeights();
  $('.main-blocks .block .summary').equalizeHeights();
  $('.main-blocks > .block').equalizeHeights();
}



$(window).load(function() {

  boxesHeight();

});

Answer 1

我想您需要使用数组来存储值，并从中返回最高数字：

$.fn.equalizeHeights = function() {
  var maxHeight = []; // change to array to store the values.

  this.each(function() {
      maxHeight.push($(this).outerHeight());
  });

  return this.each(function() {
    $(this).animate({
      height: Math.max.apply(Math, maxHeight) // <----get the highest value
    }, 300);
  });
};

均衡元素高度功能不起作用

1 个答案: