0

单击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
      );
 });
});

它的工作。但是通过这个代码页脚被移动，但我希望正文内容被移动到顶部而不是页脚。请帮我...

4

1 回答 1

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

你应该使用下面给出的插件

原型.js

ja.script.js

这是现场演示

注意：ja.script.js拥有我们所有的点击事件 ID 的脚本并展开内部 div id。所以我们可以改变id的.,,

于 2012-11-06T07:23:38.570 回答