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

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

演示图：

main.js

$(function(){
  var tmp = null,
    $title = $('.title'),
    $con = $('.title > ul');
 
  $title.click(function(){
    $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up');
    $(this).children('ul').slideToggle().end().children('.arrow').addClass('arrow-up');
    tmp = this;
  });
  $con.click(function(){
    return false;  // 阻止事件冒泡
  });
});

index.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

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{
  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{
  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{
  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有所帮助。