单击按钮后可见DIV时，主体内容会移至顶部

Question

我想在Magento中单击一个按钮后显示DIV。

代码是

<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">Click here to toggle me in and out</div>
 <div id="me"   style="display: none !important;"> <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footerbanner')->toHTML();?></div>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) { $('#clickme').click(function() { $('#me').animate({
           height: 'toggle'
           }, 1000
      );
 });
});

它的工作。但是通过这个代码页脚发生了变化，但我希望身体含量转移到顶部不是页脚。请帮助我...

Answer 1

与您的页脚Div一起尝试一下，

<div id="footer" style='position:fixed;bottom: 0px;height: 40px;float: left;'>footer footer footer footer </div>

所以，页脚将始终显示在页面底部...

实时演示

编辑：根据您的要求，只需尝试一下，

html

<div id="Content_div" style="height: 400px;">  
</div>
<div id="ja-botsl">
   <div class="main col4-set clearfix">
      <div style="height: 200px;" class="main-inner clearfix">
      </div>
      <span class='imgExpandSpan' id="ja-expand-trig">&nbsp;</span>
   </div>
</div>
<div id="footer_div" style="height: 100px;">
</div>​

CSS

<style type="text/css">
    .imgExpandSpan
    {
        background: url("https://bangalore/Ogo/Content/Images/arrow-green.png") no-repeat scroll center center #111111;
        cursor: pointer;
        height: 30px;
        left: 50%;
        position: absolute;
        top: -29px;
        width: 60px;
    }
    .imgExpandSpan.expand
    {
        background-image: url("https://bangalore/Ogo/Content/Images/arrow-red.png");
    }
    #ja-botsl
    {
        background: none repeat scroll 0 0 #111111;
        border-top: 1px solid #CCCCCC;
        color: #666666;
        position: relative;
        z-index: 2;
    }
</style>

jQuery

您应该使用下面给定的插件

prototype.js

ja.script.js

这是实时演示

注意：ja.script.js的脚本具有我们所有的单击事件ID＆amp;扩展内部DIV ID。因此，我们能够更改ID。，