0

我在每个 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 值。

4

2 回答 2

2

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

jQuery(document).ready(function() {
    jQuery(".see-more").click(function() {
        var box = jQuery(this).prev("div.content"),
            height = box[0].scrollHeight;
        box.height(height);
    });
});​
于 2012-12-24T08:27:20.843 回答
2

您可以包装内部物品并使用该容器的高度来确定物品的最大高度。您可以进行一些计算以逐步增加高度...以下设置全高

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

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

演示：http: //jsfiddle.net/nq2Em/1/

于 2012-12-24T08:33:51.130 回答