jQuery制作效果超棒的手风琴折叠菜单_jquery

 
 
 


 
 
 
 
一、HTML5基础教程
 
 
HTML5基础教程1
 
HTML5基础教程2
 
HTML5基础教程3
 
HTML5基础教程4
 
HTML5基础教程5
 
 
 
二、CSS3基础教程
 
 
CSS3基础教程1
 
CSS3基础教程2
 
CSS3基础教程3
 
CSS3基础教程4
 
CSS3基础教程5
 
 
 
三、Javascript基础教程
 
 
Javascript基础教程1
 
Javascript基础教程2
 
Javascript基础教程3
 
Javascript基础教程4
 
Javascript基础教程5
 
 
 
四、NodeJs基础教程
 
 
NodeJs基础教程1
 
NodeJs基础教程2
 
NodeJs基础教程3
 
NodeJs基础教程4
 
NodeJs基础教程5
 
 
 
五、IOS基础教程
 
 
IOS基础教程1
 
IOS基础教程2
 
IOS基础教程3
 
IOS基础教程4
 
IOS基础教程5
 
 
 
 
 
 
 
 

/*globle*/
ul, li{
 margin: 0;
 padding: 0;
 list-style-type: none;
}
a{
 display: inline-block;
 width: 100%;
 height: 31px;
 text-decoration: none;
 color: #fff;
 font-size: 13px;
}
a:hover{
 background: #52718A;
}
/*sidebar*/
.sidebar{
 width: 210px;
 height: 335px;
 margin: 50px auto;
 border-radius: 5px;
 font: 14px '新宋体';
 color: #f4f4f4;
}
.title{
 width: 95%;
 line-height: 32px;
 border-bottom: 1px solid #ccc;
 background: #1ABC9C;
 cursor: pointer;
}
.title > span{
 margin-left: 10px;
}
/*in-sidebar*/
.in-sidebar{
 width: 100%;
 display: none;
}
.in-sidebar > li{
 width: 100%;
 height: 32px;
 background: #34495E;
 line-height: 32px;
 text-align: center;
 border-bottom: 1px solid #ddd;
}
/*arrow*/
.arrow{
 float: right;
 display: inline-block;
 margin-right: 5px;
 width: 20px;
 height: 32px;
 background: url(../img/down.png) no-repeat center;
}
.arrow-up{
 background: url(../img/up.png) no-repeat center;
}