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

その動作。しかし、このコードによってフッターはシフトされますが、Bodyコンテンツはフッターではなくトップにシフトされます。私を助けてください...

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

以下のプラグインを使用する必要があります

protocol.js

ja.script.js

これがライブデモです

注：のスクリプトにja.script.jsは、すべてのクリックイベントIDがあり、内部divIDが展開されています。したがって、IDを変更できます。、、

于 2012-11-06T07:23:38.570 に答える