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');

        })

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