>我有一个两列布局,每个块根据里面的内容有不同的高度。我写了一些 jquery 行,它们采用每对块,并将两个高度中的较大值应用于两个块,它工作正常,但我需要它在窗口调整大小时调整大小,我被困在如何做到这一点。
我尝试将函数包装在 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 上运行并根据块在调整大小时呈现的自动高度更新高度,我猜我需要先以某种方式应用自动高度,然后再次运行 jquery,但我不知道该怎么做。
您使用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对象缓存,也许可以考虑去抖动。