0

コードでブラウザの位置に問題があります。Firefox ではうまく表示されますが、パネル div の下のエクスプローラ コンテンツ div 表示では、このエラーを修正するのに役立ちます。

これはcssコードです

<style>
#colleft   { width:175px;float:left; overflow:hidden; background:#333;}
#showPanel { position:inherit; z-index:2; left:0; float:left; padding-top:40px; display:none; width:0px; height:100px; cursor:pointer;}
#showPanel span{display:block; font-size:24px; height:30px; margin-top:20px; padding:10px 0 10px 10px; width:20px; background: #333;}
#colright {color:#1c1c1c; margin-left:175px}
</style>

そして、これは私のjqueryコードです

<script type="text/javascript">
jQuery(document).ready(function(){
 $("#hidePanel").click(function(){
 $("#panel").animate({marginLeft:"-175px"}, 0 );
 $("#colleft").animate({width:"0px", opacity:0}, 0 );
 $("#showPanel").show("normal").animate({width:"0px", opacity:1}, 0);
 $("#colright").animate({marginLeft:"0px"}, 0);
 });
 $("#showPanel").click(function(){
 $("#colright").animate({marginLeft:"0px"}, 0);
 $("#panel").animate({marginLeft:"0px"}, 0 );
 $("#colleft").animate({width:"175px", opacity:1}, 400 );
 $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
 });
});
</script>

htmlコード

   <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
      <tr>
        <td><h1>HEADER GOES HERE</h1></td>
      </tr>
      <tr>
        <td><div id="colleft">
      <div id="panel">
      <h1>My Panel</h1>
      <ul>
        <li>item #1</li>
        <li>item #2</li>
        <li>item #3</li>
        <li>item #4</li>
      </ul>
      <div id="hidePanel"><a href="#">&laquo; Hide Panel</a></div>
      </div>
      </div>
      <div id="showPanel"><span>&raquo;</span></div>  <div id="colright">
        <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#0066CC">
          <tr>
            <td>content div</td></tr>
        </table></div></td>
      </tr>
      <tr>
        <td><h4>Footer goes here</</td>
      </tr>
    </table>
4

2 に答える 2

0

hidePanel DIV は panel DIV の内側にありますが、showPanel DIV は panel DIV の外側にあります。これは正しいですか？

于 2012-06-15T07:04:42.223 に答える
0

あなたが望むように機能していないのは何なのか、詳しく説明していただけますか? これを次のように変更すると、javascript の余白が互いに一貫しなくなります。

<script type="text/javascript">
            jQuery(document).ready(function(){  
                $("#hidePanel").click(function(){  
                    $("#panel").animate({marginLeft:"-175px"}, 500 );  
                    $("#colleft").animate({width:"0px", opacity:0}, 400 );  
                    $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);  
                    $("#colright").animate({marginLeft:"50px"}, 500);  });  
                    $("#showPanel").click(function(){  
                    $("#colright").animate({marginLeft:"200px"}, 200);  
                    $("#panel").animate({marginLeft:"0px"}, 400 );  
                    $("#colleft").animate({width:"175px", opacity:1}, 400 );  
                    $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");  
                }); 
            }); 
    </script>

側面に小さなボタンがあり、それをクリックすると、パネル内のコンテンツが左から移動し、パネル内のコンテンツが右に押し出されます。

関係のない話ですが、ヘッダー、コンテンツ、フッターを区切るためにテーブルを使用していることにも気付きました。この問題の解決にはなりませんが、悪い習慣と見なされています。それらを CSS で分離することをお勧めします。

于 2012-06-15T09:11:49.423 に答える