jquery - 重置窗口调整大小时函数设置的高度

Question

我有一个两列布局，其中每个 block 根据其中的内容具有不同的高度。我写了一些 jquery 行，它们采用每一对 block ，并将两个高度中的较大者应用于两个 block ，它工作正常，但我需要它在窗口调整大小时调整大小，我一直在研究如何做到这一点。

我尝试将函数包装在 window.resize 事件中，但这根本不起作用。一旦页面加载并且函数运行一次，高度就不会再改变，所以如果我调整窗口大小，内容就会溢出。

布局的html代码:

 <div class="catmenu cat61">
    <div class="row">
        <div class="col-md-6">
            <div class="row itemenu par">
              <p>content</p><p>content</p>
            </div>
            <hr class="hrp">
            <div class="row itemenu par">
               <p>content</p><p>content</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row itemenu impar">
              <p>longer</p><p>content</p><p>longer</p><p>content</p>
            </div>
            <hr class="hrp">
            <div class="row itemenu impar">
               <p>longer</p><p>content</p><p>longer</p><p>content</p>
            </div>
        </div>
    </div>
</div>
 

在加载时执行技巧的 jquery:

 
var height1 = Math.max($( ".cat61 > div > div .row.itemenu.impar:nth-child(1)" ).height(), $( ".cat61 > div > div .row.itemenu.par:nth-child(1)" ).height());
	$(".cat61 > div > div .row.itemenu.impar:nth-child(1), .cat61 > div > div .row.itemenu.par:nth-child(1)").height(height1);
 

我需要函数在 window.resize 上运行并根据 block 在调整大小时呈现的自动高度更新高度，我猜我需要先以某种方式应用自动高度然后再次运行 jquery 但我不知道该怎么做。

Answer 1

您使用 window.resize 事件的想法是正确的。我怀疑您遇到的问题是，一旦在页面加载时设置了 height 值，随后的 .height() 尝试将返回第一个派生的 height1 值。

另一个问题可能是您仅在页面加载时缓存 height1，因此在 resize 时按原样使用它(即不重新计算它)只会永远将高度设置为第一个值。

如果您为调整大小创建了一个方法，该方法既清除了所有先前设置的 height 值又重新计算了元素的“自然”高度，它应该可以动态维护行高符合您的预期。

function reset_heights() {

  // CLEAR the last, programmatically set, height values (or they will never change)
  $(".cat61 > div > div .row.itemenu.impar:nth-child(1), .cat61 > div > div .row.itemenu.par:nth-child(1)").height( '' );

  // THEN measure their "natural" heights
  var height1 = Math.max( $( ".cat61 > div > div .row.itemenu.impar:nth-child(1)" ).height(), $( ".cat61 > div > div .row.itemenu.par:nth-child(1)" ).height());

  // THEN set the newly derived max height
  $(".cat61 > div > div .row.itemenu.impar:nth-child(1), .cat61 > div > div .row.itemenu.par:nth-child(1)").height( height1 ); 
}

// set your `resize` listener/handler
$( window ).on( 'resize', function ( event ) {
  reset_heights();
} );

// do your initial page-load resizing
reset_heights();

也就是说，resize 触发了很多。因此 resize 事件处理程序在处理方面可能是“昂贵的”。我建议您利用一点 jQuery Object caching ，也许可以考虑 debouncing .