jquery - 显示 jQuery 中的隐藏元素

Question

我有一个 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 直到所有列表元素都可见？

Answer 1

你应该能够读取 ul 的高度

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

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

所以你可以这样做

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