Jquery / CSS - 使用 slideUp() 时使容器元素保持相同的高度；答案

【问题标题】：Jquery / CSS - Make the container element keep the same height when using slideUp();Jquery / CSS - 使用 slideUp() 时使容器元素保持相同的高度；
【发布时间】：2012-01-12 17:04:20
【问题描述】：

我想知道在使用 slideup() 时是否有办法让父容器保持相同的高度；这样做的原因是我制作了一个元素 slideUp，然后使用新数据 slideDown，但这会使浏览器窗口在 slideUp 开始时向上滚动，所以它变得相当烦人，尤其是在低分辨率下。

【问题讨论】：

您可以将父容器设置为固定高度。

标签： jquery css slideup

【解决方案1】：

您可以简单地抓取父母的高度并通过 JQuery 将其设置为固定高度，就像我在 JSFiddle 上所做的示例一样：

http://jsfiddle.net/wEGk5/

$(document).ready(function() {

    $('input#slideup').click(function() {
        //Fix the current height of the parent container
        $('div.parent').css({ 'height' : ($('div.parent').height())});
        //Slide up and add new content to the div
        $('div#slider').slideUp('slow', function() {
            $('div#slider').html("New content!<br />New content!");
        });

        //Slide down again and watch how the parent container didn't move!
        $('div#slider').slideDown();
    });

});

【讨论】：

【解决方案2】：

您可以在隐藏子元素之前随时在 css 中设置父元素的高度：编辑：直接用 jQuery 设置高度：

var parent = $('#parent');
parent.height(parent.height());

【讨论】：