jquery - jquery on toggle content area 移动到显示区域下方

Question

我正在尝试复制您单击菜单按钮并出现左侧菜单的 facebook 移动网站。我遇到的问题是我希望我的内容区域的宽度为 100%，但是当隐藏菜单显示 100% 的内容区域低于菜单时。

这是 js fiddle：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

这可以防止水平滚动条弹出，同时填充顶部以便内容实际显示。

小提琴

    $("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();
    });