隐藏show div (但显示前200px)

Question

我正在使用StackOverflow成员制作的小提琴中的一些代码。要隐藏单击时显示div，请执行以下操作。

我的问题是我希望扩展这一点，我会解释的。

我有从数据库加载的内容，让我们说是大约500px的高度。但在页面加载时，我只想显示此内容的前200px高度，这样用户就可以单击“显示更多”，然后div的其余部分就会向下滑动。

为了保持整洁，我想扩展这里给出的代码的使用，如果可能的话，这样我的JS就是整洁的。

到目前为止，隐藏/显示内容的代码是：

JS

$(document).ready(function() {
$("#setup-ofi").click(function() {
    $("#closeable-ofi").slideToggle(function() {
        if ($(this).is(":visible")) {
            $("#setup-ofi").text("Hide Details \u25b2");
        }
        else {
            $("#setup-ofi").text("Show Details \u25bc");
        }
    });
});

})；

HTML

<h3>Property Details - <span class="sub-searchBlue"><a id="setup-ofi" href="javascript:;"> Show Details &#x25BC;</a></span></h3>
    <div id="closeable-ofi" style="display:none">
    content of db shows here
    </div>

小提琴：http://jsfiddle.net/3x2uG/

Answer 1

请在此处查找工作示例：http://jsfiddle.net/ezmilhouse/Lt3LQ/

$("#setup-ofi").click(function() {
    if ($("#closeable-ofi").css('height') === "100px") {
        $("#closeable-ofi").animate({'height': '500px', 'overflow': 'visible'}, function(){
            $("#setup-ofi").text("Hide Details \u25b2"); 
        });
    } else {
        $("#closeable-ofi").animate({'height': '100px'}, function(){
            $("#setup-ofi").text("Show Details \u25bc"); 
        });
    }
});

更改您的css：

#closeable-ofi {
    height:100px;
    overflow:hidden;
}

Answer 2

使用jQuery UI的effects模块为元素的height属性在200到500之间的过渡设置动画效果。

$('#myDiv').animate({height: 500});

在div上设置样式overflow: hidden，这样“多余”的内容就不会溢出，也不会在200像素的状态下出现滚动条。

http://jsfiddle.net/alnitak/cnHJw/上的演示，即使你不知道底层div应该有多大，它也可以工作：

var hidden = false;
$('#show').click(function() {
    if (hidden) {
        $('#main').stop().animate({height: 20});
        $('#show').text('hide...');
    } else {
        var h = $('#main').get(0).scrollHeight;
        $('#main').stop().animate({height: h});
        $('#show').text('show...');
    }
    hidden = !hidden;
});