Jquery 重置窗口大小调整时功能设置的高度

我有一个两列布局，每个块都有一个不同的高度，根据它里面的内容。我写了一些jquery行，它们接受每一对块，并将两个高度中的较大者应用于两个块，它工作得很好，但我需要它在windows上调整大小，我一直在研究如何做到这一点

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

布局的html代码：

内容
内容


内容
内容

更长的
内容
更长的
内容


更长的
内容
更长的
内容

您使用

窗口的想法是正确的。调整事件大小。我怀疑您遇到的问题是，一旦在页面加载时设置了
height
值，随后的
.height（）
尝试将返回第一个派生的
height1
值

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

如果您为调整大小创建了一种方法，该方法既清除了以前设置的任何
高度值，又重新计算了元素的“自然”高度，那么它应该可以按照您期望的方式动态保持行高度

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
事件处理程序在处理方面可能“昂贵”。我建议你利用一点，也许考虑一下。 使用
窗口。调整大小
事件的想法是正确的。我怀疑您遇到的问题是，一旦在页面加载时设置了
height
值，随后的
.height（）
尝试将返回第一个派生的
height1
值

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

如果您为调整大小创建了一种方法，该方法既清除了以前设置的任何
高度值，又重新计算了元素的“自然”高度，那么它应该可以按照您期望的方式动态保持行高度

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
事件处理程序在处理方面可能“昂贵”。我建议你利用一点，也许考虑一下。 你试过了吗？