在隱藏/顯示div上調整列高度

Question

我有一個包含兩列的html頁面。

<div class="span2 sameht"> 
    <div class="content"> 
     <div class="hidelevel">something</div> 
     <div class="hidelevel">something</div> 
     <div>something</div> 
     <div>something</div> 
    </div> 
</div> 

<div class="span3 sameht"> 
    <div class="content"> 
     <div>something</div> 
     <div>something</div> 
    </div> 
</div> 

有對列相同的高度我用這個代碼

$(function() { 
    var maxHeight = 0 
    $('.sameht').each(function() { 
     if ($(this).height() > maxHeight) { 
      maxHeight = $(this).height(); 
     } 
}); 
$('.sameht').height(maxHeight); 
}); 

現在，當我躲在這樣的列高度不動態調整股利（.hidelevel類）。

$(function() { 
    $(".hidelevel").hide(); 
}) 

難道我每次隱藏/顯示<div>的時間來重新大小的柱的高度？

感謝

Answer 1

嘗試此隱藏功能：

$(function() { 

     $(".hidelevel").hide(); 
//after hide div. 1) set height to auto and 2) resize both div 
     var maxHeight = 0 
//1) set height to auto 
     $('.sameht').css({ 'height': 'auto' }); 
//2) resize both div 
     $('.sameht').each(function() { 
      if ($(this).height() > maxHeight) { 
       maxHeight = $(this).height(); 
      } 
     }); 
     $('.sameht').height(maxHeight); 

    }) 

Answer 2

$("#hidelevel").hide(); will not work. Because these is no element having hidelevel id. 

使用這一個：

$(".hidelevel").hide(); 

Answer 3

捕捉切換高度的函數的代碼。然後在隱藏元素時調用該函數。

的Javascript

$(function() { 
    adjustHeight(); 
    $("#toggle").click(function(){ 
     $(".hidelevel").toggle(); 
     adjustHeight(); 
    }); 
}); 


function adjustHeight(){ 
var maxHeight = 0 
$('.sameht').each(function() { 
    if ($(this).height() > maxHeight) { 
    maxHeight = $(this).height(); 
    } 
}); 
$('.sameht').height(maxHeight); 
} 

HTML

<div class="span2 sameht"> 

    <div class="content"> 

     <div class="hidelevel">something</div> 
     <div class="hidelevel">something</div> 
     <div>something</div> 
     <div>something</div> 

    </div> 

</div> 

<div class="span3 sameht"> 

    <div class="content"> 

     <div>something</div> 
     <div>something</div> 

    </div> 

</div> 

<div id="toggle">Toogle Visibility</div> 

工作實例http://jsfiddle.net/jXgLd/

Answer 4

你需要把你的高度調節成一個功能，這樣就可以運行它在任何t ime：

function fixHeight() { 
    var maxHeight = Math.max.apply(this, $('.sameht').map(function() { return $(this).height(); })); 
    $('.sameht').height(maxHeight); 
}); 

.hide接受回調。只要確保你打電話，只要你已經隱藏的元素（或，只要確保你叫它每當高度變化以任何理由）：

$(function() { 
    $('#hidelevel').hide(fixHeight); 
});