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

切换内容区域上的jquery移动到显示区域下方

1 个答案: