jquery实现下拉菜单的手风琴效果

本文实例为大家分享了jquery实现下拉菜单手风琴展示的具体代码，供大家参考，具体内容如下

html代码

 

  

   学科领域
   

    
机械电子
    
生物工程
    
能源环保
    
化学化工
   
  
  

   省份地区
   

    
陕西省
    
江苏省
    
山东省
    
河南省
   
  
  

   经费范围
   

    
50万~100万
    
100万~200万
    
200万~500万
    
500万以上
   
  
  

   需求状态
   

    
状态1
    
状态2

   
  

 

css代码

.site-accordion>li{
 margin-top: 13px;
}
.site-accordion>li .tab-head{
 width: 160px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 color: #9c9c9c;
 font-size: 16px;
 background: #f2f2f2;
}
.site-accordion>li .tab-head:hover{
 background: #292d48;
}
.site-accordion>li .tab-head:after{
 content: '';
 border: 5px solid #4F5160;
 border-color: #4F5160 transparent transparent transparent;
 margin-top: 20px;
 position: relative;
 top: 10px;
 left: 5px;
}
.site-accordion>li .tabs-list{
 display: none;
}
.site-accordion>li .tabs-list li{
 width: 160px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 color: #9c9c9c;
.site-accordion>li .tabs-list li:hover{
 background: #f2f2f2;
} 

jQuery代码

$('.tab-head').click(function(){
     $(this).next().slideToggle();
     $('.tab-head').css('background','#FFFFFF');
     $(this).css('background','#292d48');

    })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。