部分显示和隐藏DIV

Question

我需要部分隐藏DIV，而不是完全隐藏。当页面加载时，我希望它显示第一个，比方说，100个像素位于div的最上部。当用户单击某个按钮时，div将打开（它可能是像jQuery的show（）那样的滑动效果）。当用户单击相同的按钮时，div将返回其原始状态，仅显示前100个像素。我试图弄清楚如何使用jQuery来做这件事，因为它似乎是最好的方法。任何提示？谢谢。

Answer 1

可以通过将div的初始高度设置为100px并将其溢出设置为隐藏在CSS中来完成。然后，当您在javascript按钮上单击显示完整div时，您可以将div的高度更改为自动。

示例：http://www.quirksmode.org/css/overflow.html

CSS代码：

overflow : hidden;

Answer 2

你需要切换方法和一些动画， jquery风格：

使用Css将div的高度设置为10px。

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