jQuery的切換內容區域移動以下顯示區域

Question

我試圖複製facebook手機網站，你點擊一個菜單按鈕，左邊的菜單出現。我遇到的問題是我希望自己的內容區域寬度達到100％，但當隱藏的菜單顯示100％的內容區域下降到菜單下時。

下面是js小提琴：jsfiddle 代碼如下所示。

預先感謝任何答覆

HTML

<div id="menu"> 
</div> 
<div id="content"> 
    <div id="header"> 
     <div id="menuButton"> 
     </div> 
    </div> 
</div>​ 

CSS

body{padding:0px; margin:0px; width:100%; min-width:320px; height:100%; min-height:480px; background-color:#FFFFFF;} 
#menu{ width:240px; min-width:240px; height:100%; min-height:480px; float:left; background-color:#CCCCCC; display:none; position:relative;} 
#header{ height:48px; width:100%; min-height:48px; min-width:320px; background-color:#666666; float:left;} 
#menuButton{ width:30px; height:30px; background-color:#999999;margin-top:9px; margin-left:15px;} 
#content{ float:left; min-width:320px; min-height:480px; width:100%;} 

jQuery的

$("#menuButton").click(function() { 
    $('#menu').toggle(),750; 
}); ​ 

Answer 1

這避免了水平滾動條從彈出，另外，填充頂部以便內容實際顯示。

FIDDLE

$("body").on('click', '#menuButton', function() { 

     if($('#container').position().left === 0){ 
      $('#container').css({'left' : 240 , 'width' : $('#container').width() - 240 }); 
     }else{ 
      $('#container').css({'left' : 0, 'width' : '100%'}); 
     } 

     $('#menu').toggle(); 
    });