如何用動態高度隱藏/顯示div的內容？

Question

我正在嘗試開發一個小模塊（如twitter bootstrap的collapse組件）。

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

您可以看到一個div.container這是註定要增長/減少的塊。 這裏我聲明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'); 
}); 

Answer 2

我不知道，我明白你正在嘗試，但你可以在這裏使用

overflow:hidden; 

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

Answer 3

設置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/

這可以通過很多方式完成。這取決於你在找什麼;）