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

你可以不将属性设置为overflow：hidden to begin。记录载荷高度。然后将css设置为溢出，直到另行通知为止。

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

Answer 2

您应该能够读取ul的高度

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

应该给你高度，无论div的高度是多少。

所以你可以做到

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

Answer 3

我在一个月前实施了非常类似的东西。

如果您只是在列表中只有三个列表元素，并在按下“全部显示”按钮时添加其余元素，它将自动重新调整大小。您需要删除'overflow：hidden'。

在jQuery中显示隐藏元素

3 个答案: