作爲一個整體顯示/隱藏/切換顯示div

Question

當我切換div下方顯示div下方的按鈕以不同/分開的方式顯示（大部分代碼來自另一個問題here）。它如何使它作爲包裝div的一部分一起滑出？謝謝。

CSS：

.more { display: none } 

HTML：

<a href="#" id="showhide">Show more</a> 

<div class="more" style="background-color:#f0f0f0;border:1px solid #d0d0d0;bottom:0px;display:none;height:30%;overflow:auto;padding:10px 10px 50px 10px;width:300px;position:fixed;right:0px;z-index:1;"> 
<div class="more1"> 
<h2>Risk Calculator</h2> 
<p>Some text</p> 
</div> 

<div class="more2"> 
<h2>Some title</h2> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
<p>Some text</p> 
</div> 

<div class="more3">  
<h2>Some title</h2> 
<p>Some text</p> 
</div> 
     <div style="background-color:#ccc;border:1px solid #ccc;bottom:0px;height:30px;padding:10px;position:fixed;right:0px;text-align:right;width:300px;"> 
      <input type='button' value='button1' /> 
      <input type='button' value='button2' /> 
    </div> 

</div> 

的JavaScript：

$('#showhide').click(function(){ 
    $('.more').toggle('slow') 
}) 

看到它在撥弄http://jsfiddle.net/J2YgE/31/

Answer 1

我加入了more類爲t他按鈕div`。這似乎看起來相當不錯：

的Javascript：

$('#showhide').click(function(){ 
    $('.more').toggle(400); 
}); 

這裏是更新fiddle。

Answer 2

包含按鈕的div的位置是「固定的」，這意味着它固定在窗口而不是其父項。將位置更改爲「絕對」可解決問題。以下是我更改的代碼片段。

更新的div風格：

<div style="background-color:#ccc;border:1px solid #ccc;bottom:0px;height:30px;padding:10px;position:absolute;right:0px;text-align:right;width:300px;"> 

更新小提琴：

http://jsfiddle.net/J2YgE/36/