Изменить размер столбцов на скрытые/показать divs

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); 
}); 

Теперь, когда я скрыть DIV (.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

Capture код, который переключает высоту в функции. Затем вызовите эту функцию, когда вы скрываете элементы.

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); 
});