js实现带三角符的手风琴效果

效果图：

图(1)初始图

图(2)点击展开图

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style * { margin 3360 0；padd : 0；}李{列表式：无；} # list { width : 240 pxborder : 1px固体# 666;余量： 20px自动；} #列表lis { } # list h2 { height: 30px线高： 30px飞越：隐藏；background : light ALM oncolor : # f1 f1；} #列出H2。活动{背景：粉色；高度： 30px线高： 30px飞越：隐藏；color: # 666} #列出H2。活动div { display : inline-block；宽度： 0;高度： 0;边框-左： 8px实心透明；边框-top: 12px实心# 666;右边框：8px实心透明；边框-底部：2px实心透明；右边距： 4px} # list H2 div { display : inline-block；宽度： 0;高度： 0;边框-左侧： 12px实心# f1 f1 f1边框-右侧： 6px纯色透明；边框-底部： 9px固体透明；边框-top:9px固体透明；/*右边距： 3px*/} #列表lis ul{ display:无；} #列表lis ul Li {行高： 24px边框-底部： 1px实心# 666;文本缩进： 15px} #列表李。悬停{背景：浅绿色；color: # F8F8F8 } #列表李：第一类{边框-顶部： 1px实心# CCC} # list .lis:last最新类型ul li:last最新类型{边框-底部：无；}/样式脚本窗户。onload=function(){ var OUl=document。getelementbyid(' list ')；var AH2=OUl。GetElementsBytagname(' H2 ')；var AuL=OUl。GetElementsBytagname(' ul ')；var h2Len=AH2 . length var AlI=nullvar ArrLi=[]；var Aullen=Aul . length for(var I=0；ih2 Eni){ AH2[I].索引=我；aH2[i].onclick=function(){ if(this。类名=' '){ AuL[this。索引]。风格。display=' blockthis . NAmE=' active } else { AuL[this。索引]。风格。显示='无'；this . class name=} } } for(var I=0；iaUlLeni ){ aLi=aUl[i].getElementsByTagName(' Li ')；for(var j=0；jaLi.lengthj){ arrli。push(AlI[j])；} } for(var I=0；iarrLi.length我)。onclick=function(){ for(var I=0；iarrLi.length我)。class name=} this . class name=' hover } } }/脚本/头体ul id=' list ' Li class=' lis ' H2分区/div大学同学/h2 ul li张三/li li张三/li li张三/li li张三/Li/ul/Li Li/高中同学/h2 ul li李四/li li李四/li li李四/li li李四/Li/ul/Li Li/初中同学/h2 ul li王五/li li王五/li li王五/li li王五/li /ul /li /ul /body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！