js自定义QQ菜单效果

QQ菜单大家都见过，这样有以下的功能：
1.点击我的好友，会展示下拉出具体的好友
2.再点击我的好友，会收缩
3.首次点击具体的某个好友，只有当前这个好友高亮
4.再次点击这个好友时，高亮状态就消失了

还是瞄一眼效果图吧：

最后代码

ul,h2 {padding:0;margin:0;}
li{list-style:none;}
#list{width:200px;margin:0 auto;border:1px solid #000;}
#list{width:200px;}
#list h2{width:200px;height:30px;line-height:30px;text-align:center;background:url(img/ico1.gif) no-repeat 20% 50% #6699FF;text-indent:24px;border-bottom:1px dotted #000;}
#list h2.active{background:url(img/ico2.gif) no-repeat 20% 50% #FFCC99;}
#list ul{width:200px;text-align:center;display:none;}
#list ul li{width:200px;height:30px;line-height:30px;}
#list ul li.highlight{background:#FF66FF;}







 

 我的好友
 

  
张三1
  
张三2
  
张三3
 
 
 

 企业好友
 

  
李四1
  
李四2
  
李四3
 
 
 

 黑名单
 

  
王五1
  
王五2
 
 

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