layui伸缩左侧菜单栏，已伸缩成功但是右侧主体部分不动

Question

            <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width:200px" onclick="ulHide()" >
                <li class="layui-nav-item">
                    <a class="" href="javascript:;"><i class="layui-icon layui-icon-form" ></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;催办投诉</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" data-id="1" data-title="投诉发起" data-url="Complain.asp"
                               class="site-demo-active" data-type="tabAdd">投诉发起</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-id="2" data-title="待处理清单" data-url="ComplainQD.asp"
                               class="site-demo-active" data-type="tabAdd">待处理清单</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-id="3" data-title="清单" data-url="ComplainQuery.asp"
                               class="site-demo-active" data-type="tabAdd">清单</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-id="4" data-title="统计清单" data-url="ComplainTJ.asp"
                               class="site-demo-active" data-type="tabAdd">统计清单</a>
                        </dd>
                    </dl>
                </li>
           </div>
                </div>
                主题部分
                <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
        <ul class="layui-tab-title">
            <li class="layui_this" lay-id="0">主页</li>
        </ul>
       <div class="layui-tab-content">
           <div class="layui-tab-item  layui-show">
               <iframe src="index.asp" frameborder="0"  scrolling="no" width="1800" height="800"></iframe>
           </div>
       </div>
     </div>
            <script>
                layui.use('element', function(){
    var element = layui.element;
});
var isShow=1;
function iconHide(){
    if(isShow===1)
        hide();
    else
        show();
    isShow*=-1;
}
function hide(){
    $('.layui-side span').hide();  
    $('.layui-side').animate({width:'200px'});//展开后的宽度
    $('.layui-body').animate({left:'200px'});
    document.getElementById('hide').className="layui-color layui-icon layui-icon-spread-left";          
}
function show(){
    $('.layui-side span').show();  
    $('.layui-side').animate({width:'55px'});//缩进去之后的宽度
    $('.layui-body').animate({left:'200px'});
    document.getElementById('hide').className="layui-color layui-icon layui-icon-shrink-right";         
}
function ulHide(){
    if(isShow===-1)
        show();
    isShow=1;
} 
            </script>

Answer 1

"layui-tab"你写了个margin-left: 200px;，当你伸缩的时候应该将这个值也做下调整