Question

当我切换div下方的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类添加到按钮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/

显示/隐藏/切换显示为整个div

2 个答案: