JS实现类似百叶窗下拉菜单效果


Posted in Javascript onDecember 30, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

function leftmove(){
  var oLeft_ul=document.getElementById('left_ul');
  var aLeft_li=oLeft_ul.children;//获得左侧ul下的第一个子集li
  var aleft_ul_hidden=oLeft_ul.getElementsByTagName('ul');
  var aleft_span_hidden=oLeft_ul.getElementsByTagName('span');
  var arr=[];
  var span_arr=[];
  getclassname(aleft_ul_hidden,'cl_hidden',arr)
  getclassname(aleft_span_hidden,'sj',span_arr);
  for(var i=0;i<aLeft_li.length;i++){
    aLeft_li[i].index=i;
    aLeft_li[i].onmouseenter=function(){
      for(var j=0;j<aLeft_li.length;j++){
        move(aLeft_li[j],{height:40});
        span_arr[j].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[j].style.top='13px';
        span_arr[j].style.left='8px';
      }
      var ul_height=arr[this.index].children.length*40
      move(aLeft_li[this.index],{height:40+ul_height});
      span_arr[this.index].style.borderColor='#666 #0ad #0ad #0ad';
      span_arr[this.index].style.top='17px';
      span_arr[this.index].style.left='6px';
    };
    aLeft_li[i].onmouseleave=function(){
      for(var j=0;j<aLeft_li.length;j++){
        move(aLeft_li[j],{height:40});
        span_arr[j].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[j].style.top='13px';
        span_arr[j].style.left='8px';
      }
    };
    arr[i].onmouseover=function(){
      for(var i=0;i<arr.length;i++){
        span_arr[i].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[i].style.top='13px';
        span_arr[i].style.left='8px';
      }
      span_arr[this.parentNode.index].style.borderColor='#666 #f2f2f2 #f2f2f2 #f2f2f2';
      span_arr[this.parentNode.index].style.top='17px';
      span_arr[this.parentNode.index].style.left='6px';
    };
    arr[i].onmouseout=function(){
      for(var i=0;i<arr.length;i++){
        span_arr[i].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[i].style.top='13px';
        span_arr[i].style.left='8px';
      }
      span_arr[this.parentNode.index].style.borderColor='#666 #0ad #0ad #0ad';
      span_arr[this.parentNode.index].style.top='17px';
      span_arr[this.parentNode.index].style.left='6px';
    };
  }
}
leftmove();
Javascript 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 #Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 #Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 #Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 #Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 #Javascript
jQuery中页面返回顶部的方法总结
Dec 30 #Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 #Javascript
You might like
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python实现学生管理系统
2018/01/11 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
公证委托书大全
2014/04/04 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书