javascript - 部分显示和隐藏 DIV

Question

我需要部分隐藏 DIV，而不是完全隐藏。当页面加载时，我希望它显示第一个，比如说，位于 div 最上部的 100 像素。当用户点击某个按钮时，会打开 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 )
  }
);