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

2019-11-19 17:22:04

字体：大中小

来源：转载

供稿：网友

效果图：

图（1）初始图

图（2）点击展开图

代码如下：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>  *{  margin: 0;  padding: 0;  }  li{  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].onclick=function(){   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].onclick=function(){   for(var i=0;i<arrLi.length;i++){    arrLi[i].className='';   }   this.className='hover';   }  }  } </script> </head> <body> <ul id="list">  <li class="lis">  <h2><div></div>大学同学</h2>  <ul>   <li>张三</li>   <li>张三</li>   <li>张三</li>   <li>张三</li>  </ul>  </li>  <li class="lis">  <h2><div></div>高中同学</h2>  <ul>   <li>李四</li>   <li>李四</li>   <li>李四</li>   <li>李四</li>  </ul>  </li>  <li class="lis">  <h2><div></div>初中同学</h2>  <ul>   <li>王五</li>   <li>王五</li>   <li>王五</li>   <li>王五</li>  </ul>  </li> </ul> </body></html>

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

上一篇：分分钟玩转Vue.js组件（二）

下一篇：JavaScript拖动层Div代码