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

来源：盖帽养生

拉风的jQuery制作的手风琴折叠菜单，效果非常不错!这里是之前版本的改进版，主要是jquery代码改进

演示图：

main.js

index.html




 jquery js css html
 
 


 
 
 
 一、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

style.css

/*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;
}

以上所述就是本文给大家分享的全部内容了，希望能够对大家学习jQuery有所帮助。