显示 jQuery 中的隐藏元素答案

【问题标题】：Reveal Hidden Elements in jQuery显示 jQuery 中的隐藏元素
【发布时间】：2009-07-17 20:21:40
【问题描述】：

我有一个 div 需要显示列表中的前三个项目，如果该列表大于三个项目，我想要一个按钮来触发以展开以显示所有项目。我可以通过 PHP 找出列表中有多少项目，但这个数字可能是 0 到 30。

<style type="text/css">
    .box {
        height: 80px;
        overflow: hidden;
    }
    .box li {
        height: 20px;
        background: red;
    }
</style>

<div class="box">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li> 
        <li>Item 4</li> 
    </ul>   
</div>
<a href="#show-all">Show All</a>

有没有一种方法可以自动找到 div 需要扩展到的正确高度？或者有没有一种方法可以让 jQuery 扩展 div 直到所有列表元素都可见？

【问题讨论】：

标签： jquery html animation

【解决方案1】：

你应该还能读到ul的高度

alert($(".box ul").height());

应该给你高度，不管div的高度是多少。

所以你可以这样做

$(".box").animate({ height: $(".box ul").height()+"px" });

【讨论】：

【解决方案2】：

您可以不将属性设置为溢出：隐藏开始。记录负载高度。然后将 css 设置为溢出，直至另行通知。

/* I believe boxHeight will take the value of .height() in this case */
var boxHeight = $("#myBox").height().css({"height":"100px","overflow":"hidden"});

【讨论】：

【解决方案3】：

一个月前我实现了一些非常相似的东西。

如果列表中只有三个列表元素，然后在按下“显示全部”按钮时添加其余元素，它将自动重新调整大小。不过，您需要删除“溢出：隐藏”。

【讨论】：