layui伸缩左侧菜单栏,已伸缩成功但是右侧主体部分不动
<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> 催办投诉</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>