jquery - 调整隐藏/显示 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);
});

现在，当我以这种方式隐藏 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

捕获在函数中切换高度的代码。然后在隐藏元素时调用此函数。

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

你需要把你的高度调节器变成一个函数，这样你就可以随时运行它：

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

.hide接受回调。只要确保在隐藏元素时调用它（或者，只要确保在高度因任何原因发生变化时调用它）：

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