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>

FIDDLE：http://jsfiddle.net/3x2uG/

Answer 1

使用jQuery UI的效果模块为元素的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;
});

Answer 2

在此处查找工作示例：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;
}

隐藏显示div（但显示前200px）

2 个答案: