增加list缩放动画

static/script.js

@@ -80,4 +80,51 @@ $(function() {
     }
   };
   navFunc.init();
+    var listFunc={
+        num:0,
+        cnum:0,
+        init:function (){
+            var self=this;
+            self.listBox=$(".aside-container>ul");
+            if(!self.listBox.length){
+                return
+            }
+            self.getUrlNum();
+            self.listBox.children().eq(self.num).attr("open",true).find("ul").css("display","block");
+            //添加标题事件；
+            self.addTitleEvent()
+        },
+        getUrlNum:function (){
+            var self=this,url=location.href,str="";
+            //console.log(self.listBox.find("a"))
+            for(var i=0;i<self.listBox.find("a").length;i++){
+                var m=self.listBox.find("a").eq(i);
+                if(m.attr("href")=="./"||url.indexOf(m.attr("href"))>=0){
+                    self.num=m.parent().parent().parent().index();
+                    self.cnum=m.parent().index();
+                    console.log(self.num)
+                }
+            }
+        },
+        addTitleEvent:function (){
+            var self=this;
+            var title=self.listBox.find("h4");
+            title.bind("click",function (e){
+                var parent=$(this).parent();
+                if(parent.attr("open")){
+                    parent.removeAttr("open");
+                    if(parent.index()==self.num){
+                        $(this).addClass("current")
+                    }
+                }else{
+                    parent.attr("open",true);
+                    if(parent.index()==self.num){
+                        $(this).removeClass("current")
+                    }
+                }
+                parent.find("ul").slideToggle(300);
+            })
+        }
+    };
+    listFunc.init();
 });

static/style.css

@@ -373,13 +373,21 @@ footer ul li > a {
   background: #F9F9F9;
   padding-top: 15px;
 }
-
+.aside-container>ul>li{
+    overflow: hidden;
+}
 .aside-container li h4 {
   font-size: 16px;
   font-weight: bold;
-  padding-left: 50px;
+  padding:10px 0 10px 50px;
-  margin: 10px 0;
+  margin:0;
   color: #5C6B77;
+    cursor: pointer;
+    transition: background .5s,border .5s;
+}
+.aside-container li>ul{
+    display: none;
+    background: #f4f4f4;
 }
 
 .aside-container li a {
@@ -403,7 +411,7 @@ footer ul li > a {
   color: #6EB4E0;
 }
 
-.aside-container li.current > a {
+.aside-container .current  {
   background: #fff;
   border-left: 3px solid #71B5DE;
   color: #71B5DE;