效果图：

图（1）初始图

图（2）点击展开图

代码如下：

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title /title 
 style 
 margin: 0;
 padding: 0;
 list-style: none;
 #list{
 width: 240px;
 border: 1px solid #666;
 margin: 20px auto;
 #list .lis{
 #list h2{
 height: 30px;
 line-height: 30px;
 overflow: hidden;
 background: lightsalmon;
 color: #f1f1f1;
 #list h2.active{
 background: pink;
 height: 30px;
 line-height: 30px;
 overflow: hidden;
 color: #666;
 #list h2.active div{
 display: inline-block;
 width: 0;
 height: 0;
 border-left: 8px solid transparent;
 border-top: 12px solid #666;
 border-right:8px solid transparent;
 border-bottom:2px solid transparent;
 margin-right: 4px;
 #list h2 div{
 display: inline-block;
 width: 0;
 height: 0;
 border-left: 12px solid #f1f1f1;
 border-right: 6px solid transparent;
 border-bottom: 9px solid transparent;
 border-top:9px solid transparent;
 /*margin-right: 3px;*/
 #list .lis ul{
 display: none;
 #list .lis ul li{
 line-height: 24px;
 border-bottom: 1px solid #666;
 text-indent: 15px;
 #list .lis ul li.hover{
 background: lightgreen;
 color: #F8F8F8;
 #list .lis ul li:first-of-type{
 border-top: 1px solid #ccc;
 #list .lis:last-of-type ul li:last-of-type{
 border-bottom:none;
 /style 
 script 
 window.onload=function(){
 var oUl=document.getElementById('list');
 var aH2=oUl.getElementsByTagName('h2');
 var aUl=oUl.getElementsByTagName('ul');
 var h2Len=aH2.length;
 var aLi=null;
 var arrLi=[];
 var aUlLen=aUl.length;
 for(var i=0;i h2Len;i++){
 aH2[i].index=i;
 aH2[i]. unction(){
 if(this.className=='')
 aUl[this.index].style.display='block';
 this.className='active';
 else{
 aUl[this.index].style.display='none';
 this.className='';
 for(var i=0;i aUlLen;i++){
 aLi=aUl[i].getElementsByTagName('li');
 for(var j=0;j aLi.length;j++){
 arrLi.push(aLi[j]);
 for(var i=0;i arrLi.length;i++){
 arrLi[i]. unction(){
 for(var i=0;i arrLi.length;i++){
 arrLi[i].className='';
 this.className='hover';
 /script 
 /head 
 body 
 ul id="list" 
 h2 div /div 大学同学 /h2 
 li 张三 /li 
 li 张三 /li 
 li 张三 /li 
 li 张三 /li 
 /ul 
 /li 
 h2 div /div 高中同学 /h2 
 li 李四 /li 
 li 李四 /li 
 li 李四 /li 
 li 李四 /li 
 /ul 
 /li 
 h2 div /div 初中同学 /h2 
 li 王五 /li 
 li 王五 /li 
 li 王五 /li 
 li 王五 /li 
 /ul 
 /li 
 /ul 
 /body 
 /html 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持凡科！