Изменить высоту в JQuery только работает один раз

Question

У меня есть набор списков продуктов, у каждого из которых есть ссылка под ними с событием щелчка, когда он нажимается, он переходит к родительскому классу, находит класс "surf_prod1" внизу и slideToggles его. Где функция, которая проверяет все div с классом "surf_prod" и получает наибольшую innerHeight, которая передается назад и используется как высота для всех div с классом "surf_prod".

Это работает плавники для первого клика, однако последующие не имеют никакого эффекта, и только первоначальная высота, кажется, имеет эффект, не уверен, что это связано с какой-то формой кэширования?

Надеюсь, кто-то может помочь.

Вот мой 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);