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 相关文章推荐
jQuery实现统计复选框选中数量
Nov 24 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
Layui实现数据表格默认全部显示(不要分页)
Oct 26 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 include,include_once,require,require_once
2008/09/05 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
js实现交通灯效果
2017/01/13 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
Element Input组件分析小结
2018/10/11 Javascript
Python3.4实现远程控制电脑开关机
2018/02/22 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python之用户输入的实例
2018/06/22 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
kafka-python批量发送数据的实例
2018/12/27 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
如何通过python实现全排列
2020/02/11 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
考试不及格的检讨书
2014/01/22 职场文书
养成教育经验材料
2014/05/26 职场文书
毕业生求职信范文
2014/06/29 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
企业计划生育责任书
2015/05/09 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android