up: 左侧菜单展开动画

css/okadmin.css

@@ -3,6 +3,15 @@
 @import "../lib/fonts/myfont.css";
 @import "../lib/nprogress/nprogress.css";
 
+#navBar .layui-nav-child{
+    /*transition: height .5s;*/
+    overflow: hidden;
+    padding: 5px 0!important;
+}
+#navBar .layui-nav-itemed .layui-nav-child,
+#navBar .layui-nav-child dd{
+    overflow: hidden;
+}
 
 [class^="ok-icon"], [class*=" ok-icon"] {
     line-height: inherit;

js/okadmin.js

@@ -25,7 +25,9 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
       if ($(this).siblings().length == 0) {
          okTab.tabAdd($(this));
       }
-      $(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签
+      //关闭其他的二级标签
+      $(this).parent("li").siblings().removeClass("layui-nav-itemed")
+      
    });
    
    /**
@@ -93,6 +95,31 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
       }
    });
    
+   /**动画**/
+   $("#navBar").on('click', '.layui-nav-item a', function () {
+      if (!$(this).attr('lay-id')) {
+         var superEle = $(this).parent();
+         var ele = $(this).next('.layui-nav-child');
+         var height = ele.height();
+         if (superEle.is('.layui-nav-itemed')) {
+            ele.height(0);
+            ele.animate({
+               height: height + 'px'
+            }, function () {
+               ele.removeAttr('style');
+            });
+         } else {
+            ele.css({'display':'block'});
+            ele.animate({
+               height: 0
+            }, function () {
+               ele.removeAttr('style');
+               ele.height('auto');
+            });
+         }
+      }
+   });
+   
    /**
     * 全屏和退出全屏的方法
     * @param num