2009-01-15 126 views
2

我需要部分隐藏DIV,而不是全部。当页面加载时,我希望它显示第一个,比方说,坐在div的最上部分的100个像素。当用户点击某个按钮时,div会打开(可能是jQuery show()的滑动效果)。当用户点击相同的按钮时,div将返回到原来的状态,只显示前100个像素。我想弄清楚如何用jQuery来做到这一点,因为它似乎是最好的方式来做到这一点。任何提示?谢谢。部分显示和隐藏DIV

回答

6

它可以通过将div的初始高度设置为100px并将其溢出设置为隐藏在CSS中来完成。那么你可以改变div的高度为自动,当你显示完整的div在JavaScript按钮点击。

例如:http://www.quirksmode.org/css/overflow.html

CSS代码:

overflow : hidden; 
+0

只是为了评论,该示例显示了CSS'overflow:hidden'属性的示例,以获取图片如何隐藏div的额外内容,直到javascript取消隐藏它... – zappan 2009-01-15 19:16:03

2

你需要切换方法和一些动画, jQuery的风格:

设置div的高度利用CSS为10px。

$("td").toggle(
    function() { 
    $(this).animate({ height:"100px" } , 1000) 
    }, 
    function() { 
    $(this).animate({ height:"10px" } , 1000) 
    } 
);