Question

我有2列（左和右），我想要相等的列。下面使用的代码完美地完成了这一点但是，在列左侧，我有一些隐藏的文本/段落，可以通过单击按钮看到，然后显示隐藏的内容。我正在使用的代码不考虑额外的高度，它只是重叠。

我应该对代码进行哪些修改，以便在显示隐藏内容时考虑额外的高度？

HTML：

<div class="container">

    <div class="blocks left">
        <button>Show</button>

        <div class="hidden-content">
             Yup!
        </div>
    </div>
    <div class="blocks right"></div>
</div>

JS：

function setEqualHeight(columns) {
    var tallestcolumn = 0;
    columns.each(function() {
        currentHeight = $(this).height();
        if (currentHeight > tallestcolumn) {
            tallestcolumn = currentHeight;
        }
    });
    columns.height(tallestcolumn);
}

setEqualHeight( $('.blocks'));

Answer 1

在显示/隐藏内容之前，将添加到容器.blocks的高度重置为“自动”＃。之前的高度是固定的（在初始计算时），因此添加的任何内容都会重叠。

JS

//on click of the button
$('button').on('click', function () {
    $('.blocks').css("height", "auto");
    $('.hidden-content').show();
    setEqualHeight($('.blocks'));
});

Fiddle

隐藏元素的等列高度

1 个答案: