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 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
PHP语法速查表
2007/01/02 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
挂牌仪式主持词
2014/03/20 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
青年志愿者活动感想
2015/08/07 职场文书