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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
js 小数取整的函数
May 10 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
js 判断 enter 事件
2009/02/12 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
React中的refs的使用教程
2018/02/13 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
js实现打字小游戏
2019/12/17 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
利用Psyco提升Python运行速度
2014/12/24 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
利用python在excel中画图的实现方法
2020/03/17 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
小学优秀班集体申报材料
2014/05/25 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
甘南现象心得体会
2014/09/11 职场文书
检察院起诉书
2015/05/20 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript