欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
不懂什么是小程序_js完成带三角符的手风琴效果
时间: 2021-01-12 13:33 浏览次数:
js完成带三角符的手风琴实际效果 文中关键详细介绍了js完成带三角符手风琴实际效果的案例。具备非常好的参照使用价值,下边跟随网编一起來看看吧实际效果图: 图(1)原始
js实现带三角符的手风琴效果       本文主要介绍了js实现带三角符手风琴效果的实例。具有很好的参考价值,下面跟着小编一起来看下吧

效果图:

 

图(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 

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


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园