文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么使用js实现带三角符的手风琴效果

2024-04-02 19:55

关注

这篇文章主要介绍了怎么使用js实现带三角符的手风琴效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

效果图:

 怎么使用js实现带三角符的手风琴效果

图(1)初始图

怎么使用js实现带三角符的手风琴效果

图(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 h3{
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: lightsalmon;
  color: #f1f1f1;
  }
  #list h3.active{
  background: pink;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  color: #666;
  }
  #list h3.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 h3 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;
  
  }
  #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('h3');
  var aUl=oUl.getElementsByTagName('ul');
  var h3Len=aH2.length;
  var aLi=null;
  var arrLi=[];
  var aUlLen=aUl.length;
  for(var i=0;i<h3Len;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">
  <h3><div></div>大学同学</h3>
  <ul>
   <li>张三</li>
   <li>张三</li>
   <li>张三</li>
   <li>张三</li>
  </ul>
  </li>
  <li class="lis">
  <h3><div></div>高中同学</h3>
  <ul>
   <li>李四</li>
   <li>李四</li>
   <li>李四</li>
   <li>李四</li>
  </ul>
  </li>
  <li class="lis">
  <h3><div></div>初中同学</h3>
  <ul>
   <li>王五</li>
   <li>王五</li>
   <li>王五</li>
   <li>王五</li>
  </ul>
  </li>
 </ul>
 </body>
</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“怎么使用js实现带三角符的手风琴效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯