js实现带三角符的手风琴效果
2019/6/27 21:07:48
本文主要是介绍js实现带三角符的手风琴效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
效果图:
图(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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持找一找教程网!
这篇关于js实现带三角符的手风琴效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06vue 新建功能多条数据(还没和后端交互)还能看详情 数据是前端缓存到本地吗?-icode9专业技术文章分享
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode