改变 jquery 的高度只能工作一次

Question

我有一组产品列表，每个产品列表下面都有一个链接，上面有一个单击事件，单击该链接时，它会转到父类，找到下面的类“surf_prod1”并滑动切换它。 其中一个函数检查所有类别为“surf_prod”的div并获取最大的innerHeight，该值被传回并用作所有类别为“surf_prod”的div的高度。

这对于第一次点击有效，但是后续的点击没有效果，并且只有初始高度似乎有效果，不确定这是否是由于某种形式的缓存造成的？

希望有人可以提供帮助。

这是我的 html:

<div class="surf_prod">
<img height="300" border="0" alt="7'2" - Egg" src="product_images/takayama_egg_7_2_egg_l0242_front.jpg"/><br/>
<span style="height: 35px;"><b id="review1615">7'2" - Egg</b></span><br/>
<div valign="top" class="surf_prod1">
    <p style="margin-bottom: 2px;"><b>N : </b>16 1/4</p>
    <p style="margin-bottom: 2px;"><b>M : </b>21 1/4</p>
    <p style="margin-bottom: 2px;"><b>T : </b>14 3/4</p>
    <p style="margin-bottom: 2px;"><b>Th : </b>2 3/8</p>
</div>
<span style="margin: 0px;"><b>FINS</b></span><br/>
<div class="surf_prod1">
    <p><b>Centre : </b>US 8" TAK 4.5</p>
    <p><b>Side : </b>FCS M5</p>
</div>
    <div class="review_box">
    <a class="review_link" href="#review1615"><b style="cursor: pointer; text-decoration: underline; color: rgb(204, 0, 0);" title="Click For Review">Board Review</b></a>
    <div style="text-align: left; display: none;" class="surf_prod1 review_body">If you're not quite ready to "rip and shred" on a short board, nor are you apt to "cruise" on a long board, then the Hawaiian Pro Designs Egg is the perfect solution. This model is an "eggy" looking shape that allows the rider to trim high on the wave in the middle of the board or race down the line on the tail, whichever the rider prefers. This board is also a perfect beginners board because of the overall forgiving shape that allows for a variety of mistakes without loss of speed or manoeuvrability.<br/><a href="http://www.surfcom.co.uk/app/content_prod/5/1615"><b>More</b></a></div>
</div>
</div>

和我的 JavaScript:

function equalHeight(group) {
var tallest = 0;
group.each(function() {
    thisHeight = $(this).innerHeight(true);
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
  });
  return tallest;
}

$(document).ready(function(){
$(".review_body").slideUp("fast");

$(".review_link").click(function(ev){
    ev.preventDefault();

    var link = $(this).attr('href');

    //Get the review container to be able to manipulate the children of it
    $(this).parent(".review_box").find(".surf_prod1").slideToggle("fast", function(){

         var surf_prod_height = equalHeight($("div.surf_prod"));
        $("div.surf_prod").height(surf_prod_height);

        document.location = link;
    });

});

});

示例 此处。

Answer 1

一旦你设置了高度，它就不再依赖于内容，所以第二次，你将获得所有 div 的相同高度——你第一次设置的高度。

在找到所需的高度之前，尝试将高度设置为“自动”：

$("div.surf_prod").height("auto");
var surf_prod_height = equalHeight($("div.surf_prod"));
$("div.surf_prod").height(surf_prod_height);