js实现二级菜单显示和收缩
window.onload=function(){
var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
var oSubNav=this.getElementsByTagName('ul')[0];
if(oSubNav){
var This=oSubNav;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight+16+"px";
if(This.offsetHeight>=120)
clearInterval(This.time);
},30)
}
}
//鼠标离开菜单,二级菜单动画收缩起来。
aLi[i].onmouseout=function(){
var oSubNav=this.getElementsByTagName('ul')[0];
if(oSubNav){
var This=oSubNav;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight-16+"px";
if(This.offsetHeight<=0)
clearInterval(This.time);
},30)
}
} }
}
<ul class="nav">
<li><a href="#">一级菜单</a>
<ul class="subNav">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a>
<ul class="subNav">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul>
js实现二级菜单显示和收缩的更多相关文章
- css实现二级菜单显示和收缩
<ul class="nav"> <li><a href="#">一级菜单</a> <ul class=& ...
- JS三级折叠菜单特效 自动收缩其它级
真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...
- PHPCMS v9 导航显示二级菜单,显示相邻栏目,内容页显示二级栏目
导航显示二级栏目 <div class="menu">{pc:content action="category" catid="0&quo ...
- js面向对象二级菜单
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 【京东详情页】——原生js爬坑之二级菜单
一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单 ...
- JS+css滑动菜单简单实现
JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- JS-鼠标经过显示二级菜单
在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...
- JS+CSS打造三级折叠菜单,自动收缩其它级 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
随机推荐
- 【转】利用 Apache JMeter 测试 WebSphere 性能
如果您预算紧张并且时间紧迫 —— 或者即使您不是这样 —— 那么,您可能希望考虑使用 JMeter 来对 Web 和其他应用程序进行压力测试.IBM 的 Greg Herringer 详细描述他使用这 ...
- virtual Box centos7 公司网络环境下不能联网的解决方案
首先感谢@采蘑菇的东峰的博客 的分享 原文:http://blog.sina.com.cn/s/blog_8d92d7580102vhky.html ------------------------- ...
- 为什么Java程序占用的内存比实际分配给它的要多
很多人错误的认为运行Java程序时使用-Xmx和-Xms参数指定的就是程序将会占用的内存,但是这实际上只是Java堆对象将会占用的内存.堆只是影响Java程序占用内存数量的一个因素.要更好的理解你的J ...
- limesurvey的问卷类型
- javascript数组的申明方式以及常用方法
数组的定义: 方法1. var mycars=new Array()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]=&qu ...
- (转)python virtual_env 的使用 + 将原来的虚拟环境部署到新环境
原文链接: https://blog.csdn.net/poxiaonie/article/details/78820015
- IOCP的缓冲区
IOCP的缓冲区: 应用程序的缓冲区 套接字的缓冲区 TCP的缓冲区 两个会造成WSAENOBUFS错误的原因: 锁定页面达到上限 非分页页面达到上限
- Mybatis动态构建Sql(无实体类)
MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. 例如,sql语句where条件中,需要一些安全判断,例如按某一条件查询时如果传入的参数是空,此时查询 ...
- 灾难恢复:RPO与RTO
许多企事业单位虽然已经认识到信息安全的重要性,却迟迟没有行动.其中的原因是多方面的,最主要的一个原因就是在如何建立容灾系统的问题上存在种种疑惑.容灾设计指标主要与容灾系统的数据恢复能力有关,最常见的设 ...
- Running command-line BLAST
Ubuntu安装BLAST 2014-02-09 10:45:03| 分类: Linux/Ubuntu|举报|字号 订阅 下载LOFTER我的照片书 | very easy! su ...