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


Posted in Javascript onMarch 01, 2017

效果图:

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

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

Javascript 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
JavaScript 继承使用分析
May 12 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
js有序数组的连接问题
Oct 01 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
JavaScript拖动层Div代码
Mar 01 #Javascript
vue组件间通信解析
Mar 01 #Javascript
性能优化之代码优化页面加载速度
Mar 01 #Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 #Javascript
Javascript仿京东放大镜的效果
Mar 01 #Javascript
Ajax实现不刷新取最新商品
Mar 01 #Javascript
Angular1.x复杂指令实例详解
Mar 01 #Javascript
You might like
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python assert语句的简单使用示例
2019/07/28 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
平安校园建设方案
2014/05/02 职场文书
大学生就业求职信
2014/06/12 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
神农溪导游词
2015/02/11 职场文书
晚会开场白和结束语
2015/05/29 职场文书
班主任开场白
2015/06/01 职场文书
六年级作文之预言作文
2019/10/25 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python