mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-04 00:49:39 +08:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

增加list缩放动画

Browse Source
This commit is contained in:
罗宪 2015-05-27 18:28:38 +08:00
parent e8519ccc3d
commit f4e96d90fc
2 changed files with 59 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/script.js
View File

@ -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();
});

16
static/style.css
View File

@ -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;
margin: 10px 0;
padding:10px 0 10px 50px;
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;