0

我正在尝试开发一个小模块（如collapsetwitter bootstrap 的组件）。

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

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

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

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

4

3 回答 3

2

像这样？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');
});
于 2013-08-19T18:00:20.673 回答
1

我不确定我是否理解您的尝试，但您可以使用

 overflow:hidden;

在这里演示 - http://jsfiddle.net/JjPcy/1/

于 2013-08-19T17:54:51.087 回答
1

将div.container的overflowcss 属性设置为隐藏。

div.container { overflow: hidden; }

还要创建一个名为的类，例如auto-width具有auto宽度：

div.auto-width { width: auto !important; }

然后使用 jQuery 切换类并显示容器内的数据：

$('div.header button').click(function() {
    $('div.container').toggleClass('auto-width');
});

这是演示：http: //jsfiddle.net/VE9WR/3/

它可以通过多种方式完成。这取决于你在寻找什么;）

于 2013-08-19T18:29:21.013 回答