一、实现原理：

使用定时器和排他思想完成

二、代码：

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{margin: 0;padding: 0}

ul,li{list-style: none;}

.main{ width: 400px; height: 50px; float: left; margin-top: 10px; margin-bottom: 10px; }

.main ul li{display: block;float: left; width: 100px; height: 50px;line-height: 50px; text-align: center; font-size: 12px; cursor: pointer; border: 1px solid #f2f2f2;box-sizing: border-box;}

.main ul li.active{ background:orange; color: #fff; }

.item{display: none; width: 400px; height: 50px;font-size: 12px; line-height:50px; overflow: hidden;clear: both; background: #f2f2f2;}

.item ul li{display: block;float: left; width: 100px; height: 50px;line-height: 50px; text-align: center; font-size: 12px; cursor: pointer;}

.item ul li:hover{ background:blue; color: #fff; }

</style>

</head>

<body>

<div class="main">

<ul>

<li>首页</li>

<li>关于我们</li>

<li>企业资讯</li>

<li>人才招聘</li>

</ul>

</div>

<div class="item">

<ul>

<li>选项1</li>

<li>选项2</li>

<li>选项3</li>

</ul>

</div>

<div class="item">

<ul>

<li>我们1</li>

<li>我们2</li>

<li>我们3</li>

</ul>

</div>

<div class="item">

<ul>

<li>企业1</li>

<li>企业2</li>

<li>企业3</li>

</ul>

</div>

<div class="item">

<ul>

<li>招聘1</li>

<li>招聘2</li>

<li>招聘3</li>

</ul>

</div>

<script type="text/javascript">

window.onload = function(){

var mainlis = document.querySelector('.main').querySelectorAll('li');

var items = document.querySelectorAll('.item');

var timer = null;

for (var i = 0; i < mainlis.length; i++) {

mainlis[i].index = i;

mainlis[i].onmouseover = function(){

clearTimeout(timer);

//排他思想，把所有的li去掉当前状态 把所有的item隐藏

for (var j = 0; j < mainlis.length; j++) {

mainlis[j].className = '';

items[j].style.display = 'none';

}

this.className = 'active';

items[this.index].style.display = 'block';

}

items[i].onmouseover = function(){

clearTimeout(timer);

}

mainlis[i].onmouseout = items[i].onmouseout = hide;

}

function hide(){

timer = setTimeout(function(){

for (var j = 0; j < mainlis.length; j++) {

items[j].style.display = 'none';

mainlis[j].className = '';

}

},300)

}

}

</script>

</body>

</html>

原生javascript实现二级延时菜单的更多相关文章

  1. 云南农职《JavaScript交互式网页设计》 综合机试试卷③——实现二级分类菜单

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用Jquery和JavaScript实现二级分类菜单管理 点击 ...

  2. JavaScript(获取或设置html元素的宽,高,坐标)，确定和判断鼠标是否在元素内部，二级导航菜单鼠标离开样式问题解决

    设置: document.getElementById('id').style.width=value    document.getElementById('id').style.height=va ...

  3. 原生JavaScript的省市县三级联动

    三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...

  4. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  5. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 原生 JavaScript 实现 state 状态管理系统

    原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...

  7. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  8. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  9. 原生javascript 实现 animate

    原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...

随机推荐

  1. Activity学习（二）：Activity的启动模式（转载）

    在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作.在Android中Activity的启动模式决定了Activity的启动运行方式. An ...

  2. <STL源码剖析> 6.3.6 power

    计算power的算法说明 http://www.sxt.cn/u/324/blog/2112 翻译自  http://videlalvaro.github.io/2014/03/the-power-a ...

  3. Python--day25--面向对象之多态

    多态(Python天生支持多态) 多态指的是一类事物有多种形态 动物有多种形态:人,狗,猪 import abc class Animal(metaclass=abc.ABCMeta): #同一类事物 ...

  4. zoj 3652 Maze

    Maze Time Limit: 2 Seconds      Memory Limit: 65536 KB Celica is a brave person and believer of a Go ...

  5. H3C OSPF协议分区域管理

  6. CF1163F Indecisive Taxi Fee

    NOIP之前留的坑 CF1163F Indecisive Taxi Fee 经典问题:删边最短路 在Ta的博客查看 任意找一条最短路E,给E上的点和边新加入一个1~len的编号 最短路上的边变大麻烦 ...

  7. 备战省赛组队训练赛第十七场(UPC)

    upc:传送门 A: 题解[1] G: 题解[1] D,G,H,J,L 题解 by 鲁东大学

  8. H3C保存当前配置--用户图示（console）以上

    <H3C>save         //此种保存只默认保存为Startup.cfg ,系统默认是加载此文件 The current configuration will be writte ...

  9. es6笔记 day1---let和const的应用

    ES6 -> ECMA标准 ES7  ES8 最早是由ECMA-262版本实现的 ---------------------------------------- ES6 也称为ES2015,2 ...

  10. HDU 1969 Pie [二分]

    1.题意:一项分圆饼的任务,一堆圆饼共有N个,半径不同,厚度一样,要分给F+1个人.要求每个人分的一样多,圆饼允许切但是不允许拼接,也就是每个人拿到的最多是一个完整饼,或者一个被切掉一部分的饼,要求你 ...