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实现二级菜单显示和收缩的更多相关文章

  1. css实现二级菜单显示和收缩

    <ul class="nav"> <li><a href="#">一级菜单</a> <ul class=& ...

  2. JS三级折叠菜单特效 自动收缩其它级

    真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...

  3. PHPCMS v9 导航显示二级菜单,显示相邻栏目,内容页显示二级栏目

    导航显示二级栏目 <div class="menu">{pc:content action="category" catid="0&quo ...

  4. js面向对象二级菜单

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  5. 【京东详情页】——原生js爬坑之二级菜单

    一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单       ...

  6. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

  7. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  8. JS-鼠标经过显示二级菜单

    在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...

  9. JS+CSS打造三级折叠菜单,自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. java代码。。。圆的面积好搞人。。。不是一般的搞人。。。欢迎指点指点

    package com.ll; public class Class3 {     private String name;     private int age;     private int ...

  2. 如何利用JConsole观察分析Java程序的运行并进行排错调优_java

    如何利用JConsole观察分析Java程序的运行并进行排错调优_java 官方指导  use jconsole use jmx technology

  3. 为什么多线程读写 shared_ptr 要加锁?

    https://www.cnblogs.com/Solstice/archive/2013/01/28/2879366.html 为什么多线程读写 shared_ptr 要加锁? 陈硕(giantch ...

  4. bbbbb

  5. thymeleaf switch在表格中的使用,遇到的空行问题

    switch在表格中的使用时 如果把<td>写在<div th:switch="${data.isShow}"> 里面导致外面出现很多空的<div&g ...

  6. 浪潮openStack云

  7. 随机森林(Random Forest,简称RF)

    阅读目录 1 什么是随机森林? 2 随机森林的特点 3 随机森林的相关基础知识 4 随机森林的生成 5 袋外错误率(oob error) 6 随机森林工作原理解释的一个简单例子 7 随机森林的Pyth ...

  8. 简单获取各大视频网站的flash地址

    最近做网站的时候遇到一个需求:给定一个视频地址,获取它的swf地址.例如,给一个优酷的视频地址:http://v.youku.com /v_show/id_XNDg4MzY5ODU2.html,想获取 ...

  9. Crawlspider的自动爬取

    引子 : 如果想要爬取 糗事百科 的全栈数据的方法 ? 方法一 : 基于scrapy框架中的scrapy的递归爬取进行实现(requests模块递归回调parse方法) . 方法二 : 基于Crawl ...

  10. 基于七牛Python SDK写的一个批量下载脚本

    前言 上一篇基于七牛Python SDK写的一个同步脚本所写的脚本只支持上传,不支持文件下载. 虽然这个需求不太强烈,但有可能有人(在备份.迁移时)需要,而官方有没提供对应的工具,所以我就把这个功能也 ...