可摺疊面板css位置/瀏覽器兼容性

我在我的code.it中顯示瀏覽器位置問題，但在瀏覽器內容div顯示面板下div.pls幫助我解決此錯誤。可摺疊面板css位置/瀏覽器兼容性

，這是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>

來源

2012-06-15 DAM_86

的hidePanel DIV是面板DIV裏面，但showPanel DIV在面板DIV之外。你確定這是正確的嗎？

來源

2012-06-15 07:04:42

yes.it is.it在firefox上運行良好，當我點擊隱藏面板鏈接時，內容頁面在資源管理器中出現故障......這是我的概率。 –

您運行的是哪個版本的IE？我在IE7上，在這裏看起來很好。 –

我在IE 8上，它不在那裏工作。 –

你能詳細說明這是不是你想要的方式嗎？在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-15 09:11:49

@ Dirk de Man感謝您的回覆Dirk.will很快就會檢查您的解決方案。和那張桌子使用的東西，是的，我認爲這不是一個好習慣。但我沒那麼熟悉CSS.still學習。 –

可摺疊面板css位置/瀏覽器兼容性

回答

相關問題