在jQuery中显示隐藏元素

时间:2009-07-17 12:01:45

标签: jquery html animation

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

3 个答案:

答案 0 :(得分: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"});

答案 1 :(得分:1)

您应该能够读取ul的高度

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

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

所以你可以做到

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

答案 2 :(得分:0)

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

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

豫ICP备18024241号-1