css - 如何隐藏/显示具有动态高度的 div 的内容？

Question

我正在尝试开发一个小模块(例如 twitter bootstrap 的 collapse 组件)。

我不知道如何处理向上/向下增长的 div 的内容，它可能需要我很多描述，没有什么比一个例子更好的了:Collapse deployment .

您可以看到一个div.container，它是注定向上/向下增长的 block 。我在这里声明 height: 50px 以说明部署状态。

有没有办法隐藏超出父 div 高度的内容(这里是文本的一部分)？

我喜欢我们只能通过部署另一个内容来访问内容的想法，但我真的不明白如何在 CSS 中正确实现它。

Answer 1

像这样？ JSFiddle 示例:http://jsfiddle.net/SW86B/1/

更新的 CSS

.header {
  background-color: green;
  height:20%;
}

.container {
  background-color: red;
  height: 0;
  overflow: hidden;

  -webkit-transition: height 0.2s ease;
     -moz-transition: height 0.2s ease;
          transition: height 0.2s ease;
}

.container.open { height: 50px;}

p { margin: 0; }

使用 jQuery 切换状态

$('button').on('click', function(event){
    $('.container').toggleClass('open');
});