Question

我在每个div框（类别列表）中加载了一些文本行。我需要它只显示三个负载。所以我限制了高度并设置溢出：隐藏; css让它成真。我在框旁边有一个小按钮（图像加载div），用于增加和减小框高度。问题是这个项目不能正常工作。以下是代码（我将保留其他不相关的HTML / CSS / jQuery代码）：

HTML（页面中的一个方框）：

<div class="content" style="height:50px;overflow:hidden;">
    <div>Category 1</div>
    <div>Category 2</div>
    <div>Category 3</div>
    <div>Category 4</div>
    <div>Category 5</div>
    <div>Category 6</div>
</div>
<div class="see-more"></div>

jQuery的：

jQuery(document).ready(function() {
    jQuery(".see-more").click(function() {
        jQuery(this).prev("div.content").height(200);
    });
});

jQuery代码似乎有问题。我还需要知道如何找到隐藏内容的真实高度（因为溢出）来设置框的确切高度而不是静态200值。

Answer 1

您可以使用scrollHeight属性获取容器的实际高度，或者如果您不想进行任何类型的动画，您也可以简单地删除隐藏的溢出。 This fiddle显示高度解决方案：

jQuery(document).ready(function() {
    jQuery(".see-more").click(function() {
        var box = jQuery(this).prev("div.content"),
            height = box[0].scrollHeight;
        box.height(height);
    });
});

Answer 2

您可以包裹内部项目并使用该容器的高度来确定项目的最大高度。您可以执行一些计算以逐步增加高度...以下设置完整高度

$(function(){
    $('.content').wrapInner('<div class="inner">');  

    $(".see-more").click(function() {
        var $cont=$(this).prev()
        var maxHeight = $cont.find('.inner').height();
        $cont.height(maxHeight);
    });
 });

DEMO：http://jsfiddle.net/nq2Em/1/

jQuery增加框以显示溢出内容

2 个答案: