加入响应式页面代码

css/okadmin.css

@@ -1,7 +1,8 @@
 @charset "utf-8";
 @import "../lib/layui/css/layui.css";
+@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css";
 
-/*顶部导航菜单*/
+/*顶部导航菜单开始*/
 .layui-layout-admin .layui-logo {
     color: #fff;
     font-size: 20px;
@@ -15,6 +16,8 @@
     left: 235px;
 }
 
+/*顶部导航菜单结束*/
+
 .menu-switch {
     width: 30px;
     height: 30px;
@@ -79,7 +82,7 @@
     width: 190px;
 }*/
 
-/*美化滚动条代码*/
+/*美化滚动条代码开始*/
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
@@ -112,4 +115,27 @@
 
 ::-webkit-scrollbar-resizer:vertical {
     background-color: #FF6E00;
-}
+}
+
+/*美化滚动条代码结束*/
+
+/*响应式代码控制开始*/
+@media screen and (max-width: 768px) {
+    .layui-layout-admin .layui-bg-black {
+        left: -200px;
+    }
+
+    .layui-layout-admin .content-body {
+        left: 0;
+    }
+
+    .layui-layout-admin .layui-footer {
+        left: 0;
+    }
+
+    .layui-layout-left {
+        display: none;
+    }
+}
+
+/*响应式代码控制结束*/

index.html

@@ -15,7 +15,7 @@
         <div class="layui-header">
             <div class="layui-logo">ok-admin v1.0</div>
             <div class="menu-switch">
-                <span class="layui-icon layui-icon-shrink-right"></span>
+                <i class="iconfont icon-caidan"></i>
             </div>
             <ul class="layui-nav layui-layout-left">
                 <li class="layui-nav-item layui-this"><a href="">控制台<span class="layui-badge">9</span></a></li>

js/okadmin.js

@@ -6,20 +6,15 @@ layui.use(['element', 'jquery'], function () {
      * 左边菜单显示/隐藏功能
      * @type {boolean}
      */
-    var flag = true;
     $(".menu-switch").click(function () {
-        if (flag) {
+        if ($(".layui-layout-admin .layui-side").css("left") == '0px') {
             $(".layui-layout-admin .layui-side").animate({left: "-200px"});
             $(".layui-layout-admin .content-body").animate({left: "0px"});
             $(".layui-layout-admin .layui-footer").animate({left: "0px"});
-            $(".menu-switch span").removeClass("layui-icon-shrink-right").addClass("layui-icon-spread-left");
-            flag = false;
         } else {
             $(".layui-layout-admin .layui-side").animate({left: "0px"});
             $(".layui-layout-admin .content-body").animate({left: "200px"});
             $(".layui-layout-admin .layui-footer").animate({left: "200px"});
-            $(".menu-switch span").removeClass("layui-icon-spread-left").addClass("layui-icon-shrink-right");
-            flag = true;
         }
     });
 
@@ -30,7 +25,7 @@ layui.use(['element', 'jquery'], function () {
         var title = $(this).text();
         var path = $(this).children('a').attr('path');
         var tabId = $(this).children('a').attr('tab-id');
-        // 去重复
+        // 去重复选项卡
         for (var i = 0; i < $('.ok-frame').length; i++) {
             if ($('.ok-frame').eq(i).attr('tab-id') == tabId) {
                 tab.tabChange(tabId);