<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="layui/layui.js"></script>
<style>
</style>
</head>
<body>
<div class="gy_wrap1">
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<div title="菜单缩放" class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li>
<a href="javascript:;"><img class="logo" src="images/logo.png" alt=""></a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >首页</span></a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >智能柜管理</span></a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >单号管理</span></a>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >订单管理</span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" onclick="selectItem(this)" id="sidebar_item_summary"><i class="fa fa-list fa-lg"></i> <span >订单管理</span></a></dd>
<dd><a href="javascript:;" onclick="selectItem(this)" id="sidebar_item_attachment"><i class="fa fa-clipboard fa-lg"></i> <span >新增订单</span></a></dd>
<dd><a href="javascript:;" onclick="selectItem(this)" id="sidebar_item_cert"><i class="fa fa-file-text fa-lg"></i> <span >订单列表打印</span></a></dd>
<dd><a href="javascript:;" onclick="selectItem(this)" id="sidebar_item_procedure"><i class="fa fa-file-text fa-lg"></i> <span >人工调度</span></a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >地理围栏</span></a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >报表统计</span></a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >系统管理</span></a>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:;"><i class="fa fa-user-circle-o fa-lg"></i> <span >日志信息</span></a>
</li>
</ul>
</div>
</div>
<div class="layui-body">
</div>
</div>
<div class="fourteen wide stretched column" id="mainpage">
<iframe style="border: 0;width: 100%"></iframe>
</div>
<script type="text/javascript">
function selectItem(obj) {
$('.active.item').removeClass("active");
obj.className += " active";
if (obj.id == 'sidebar_item_summary') {///项目信息
$('#mainpage iframe').css({ "margin-left": "220px","max-width":"1700px"});
$('#mainpage iframe').attr('src',"OrderManagement.html");
} else if (obj.id == 'sidebar_item_attachment') {//材料信息
$('#mainpage iframe').attr('src',"NewOrder.html");
} else if (obj.id == 'sidebar_item_cert') {//电子证照
$('#mainpage iframe').attr('src',"OrderListPrinting.html");
} else if (obj.id == 'sidebar_item_procedure') {//流程图
$('#mainpage iframe').attr('src',"ManualScheduling.html");
}
}
$(document).ready(function(){
$('#wrapper').css("min-height",$(document.body).height()-96);
selectItem($('#sidebar_item_summary')[0]);
});
</script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
var isShow = true; //定义一个标志位
$('.kit-side-fold').click(function(){
//选择出所有的span，并判断是不是hidden
$('.layui-nav-item span').each(function(){
if($(this).is(':hidden')){
$(this).show();
}else{
$(this).hide();
}
});
//判断isshow的状态
if(isShow){
$('.layui-side.layui-bg-black').width(60); //设置宽度
$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
//将footer和body的宽度修改
$('.layui-body').css('left', 60+'px');
$('.layui-footer').css('left', 60+'px');
//将二级导航栏隐藏
$('dd span').each(function(){
$(this).hide();
});
//修改标志位
isShow =false;
}else{
$('.layui-side.layui-bg-black').width(200);
$('.kit-side-fold i').css('margin-right', '10%');
$('.layui-body').css('left', 200+'px');
$('.layui-footer').css('left', 200+'px');
$('dd span').each(function(){
$(this).show();
});
isShow =true;
}
});
</script>
</body>
</html>
效果：