使用不同的父级jQuery均衡列的高度

Question

我正在使用jQuery代码段来平衡下拉菜单megamenu中列的高度：

$(document).ready(function(){
    var maxheight = 0;
    $('.menu .parent .dropdown .dropdown-inner .column').each(function(){
      if($(this).height() > maxheight) { maxheight = $(this).height(); }
    });

    $('.menu .parent .dropdown .dropdown-inner .column').height(maxheight);
});

这是HTML：

<div class="menu">
    <ul class="dropdown">

        <li class="parent item1">
        <a href="#">Link</a>
        <div class="dropdown-inner">
            <div class="column1">
                <ol>
                    <li>sublink1</li>
                    <li>sublink2</li>
                    <li>sublink3</li>
                </ol>
            </div>
            <div class="column2">
                <ol>
                    <li>sublink1</li>
                    <li>sublink2</li>
                    <li>sublink3</li>
                </ol>
            </div>
            <div class="column3">
                <ol>
                    <li>sublink1</li>
                    <li>sublink2</li>
                    <li>sublink3</li>
                </ol>
            </div>
        </div>
    </li>                                                                                                   

        <li class="parent item2">
        <a href="#">Link</a>
        <div class="dropdown-inner">
            <div class="column1">
                <ol>
                    <li>sublink1</li>
                    <li>sublink2</li>
                    <li>sublink3</li>
                    <li>sublink4</li>
                    <li>sublink5</li>
                    <li>sublink6</li>
                </ol>
            </div>
            <div class="column2">
                <ol>
                    <li>sublink1</li>
                    <li>sublink2</li>
                    <li>sublink3</li>
                    <li>sublink4</li>
                    <li>sublink5</li>
                    <li>sublink6</li>
                </ol>
            </div>
            <div class="column3">
                <ol>
                    <li>sublink1</li>
                    <li>sublink2</li>
                    <li>sublink3</li>
                    <li>sublink4</li>
                    <li>sublink5</li>
                    <li>sublink6</li>
                </ol>
            </div>
        </div>
    </li>                                                                                                                                       
    </ul>
</div>

我想调整这个jQuery片段，因此它会为每个父项（li item with item1和item2）的列均衡，因为列（类column1和column2的元素）包含不同数量的链接，这导致包装元素的不同高度（带有类下拉内部的div）。如果根据最高元素（链接数量较大）计算高度，则元素中的空格太多，链接较少。

您可以在这些屏幕截图中看到这种情况：

感谢您的帮助！

Answer 1

我会遍历下拉菜单和列。 记住最高值并为下拉列设置该值。

$(dropdown).each(function () {
   Height = 0;
    $(this).find('column').each(function () {
       check if the height of this column is bigger than the var height
       if so set var height to new height
    });
    $(this).find('column').height(height);
});

像这样。

Answer 2

删除最小高度min-height

试试这个，

$('.level-wrap').css('min-height','0px')

更新

$(".dropdown-inner > div").css('min-height','0px')

Answer 3

您可以使用此jQuery方法使任何元素与任何匹配的选择器相等。

创建方法：

$(document).ready(function(){
  jQuery.fn.equalHeights = function(){
    var colSelector = this.selector;
    var newHeight;
    var colHeights = [];
    $(colSelector).each(function(){
      var singleCol = $(this).outerHeight();
      colHeights.push(singleCol);
      newHeight = Math.max.apply(Math,colHeights);
    });
    $(colSelector).css('height', newHeight+'px');
  }
});

用法：

$('.menu .parent .dropdown .dropdown-inner .column').equalHeights();