如何用动态高度隐藏/显示div的内容？

我正在尝试开发一个小模块（如twitter bootstrap的collapse组件）。如何用动态高度隐藏/显示div的内容？

我不知道如何处理正在成长/下降的div的内容，它可能需要我多次描述，没有比示例更好的了：Collapse deployment。

您可以看到一个div.container这是注定要增长/减少的块。这里我声明height: 50px来说明部署的状态。

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

我喜欢这样的想法，即我们可以通过部署另一个内容来访问内容，但我真的不知道如何使它在CSS中正确发生。

来源

2013-08-19 Ludo

喜欢这个？例如的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-19 18:00:20 kunalbhat

我不知道，我明白你正在尝试，但你可以在这里使用

overflow:hidden;

演示 - http://jsfiddle.net/JjPcy/1/

来源

2013-08-19 17:54:51 Travis

设置div.container的overflow CSS properoty隐藏。

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-19 18:29:21 Nojan

如何用动态高度隐藏/显示div的内容？

回答

相关问题