如何在jQuery中检测和更改div高度

让我首先说,由于布局的复杂设计,我最终编写了一个名为equalHeights的函数,它基本上在我的布局中查看几个div并选择最高并将rest高度设置为该值,这样我就可以了与div具有相同的高度。 所以基本上在页面加载之后,如果你查看代码,你会看到style =“height:xxx”应用于每个div。 这个我无法改变所以任何解决方案都无法触及此function。

div也有溢出设置为隐藏,它再次有其目的,不能改变。

因此,考虑到上述情况,我需要做的是能够根据用户交互性的变化来更改div的高度。 例如,我有一个包含一些隐藏行的表,当用户点击链接时会扩展这些行。 由于溢出,表格的额外长度将被隐藏,我需要扩展div的大小。 同时我不想将此扩展绑定到特定的点击,我希望Javascript检测内容的变化并相应地扩展我的div。 我不希望它像这样绑定的原因是因为我需要在具有相同布局的不同页面中实现它,并且我不想为每个事件编码。

我试过了两个:

$("#myDiv").resize(function(){ equalHeight($("#myDiv")); }); 

 $("#myDiv").content().resize(function(){ equalHeight($("#myDiv")); }); 

似乎都不起作用! 有任何想法吗?

基本的resize事件只能绑定到$(window),如果你想将resize事件绑定到div,你需要使用一个插件:

http://benalman.com/projects/jquery-resize-plugin/

您可以在function中触发自己的div事件。 因此,它不会强制您重写单击函数。

http://jsfiddle.net/JKByC/7/

假设您显示了一定数量的行,您可以检查一个大于该数字的数字,然后相应地设置div样式。

  var last_height = $('#div').css('height'); $(window).resize(function() { if($('#div').css('height') != last_height) { last_height = $('#div').css('height'); //do what you want } });