一、实现原理：

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

二、代码：

<!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. .NET 创建 WebService

    服务器端代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  2. Yarn install 报错 Resolving packages... [2/4] Fetching packages... info There appears to be trouble with your network connection. Retrying

    1.设置淘宝代理 yarn config set registry 'https://registry.npm.taobao.org' 2.如果网址本地可以打开,说明你本地有代理设置 所以需要按本地的 ...

  3. TensorFlow指定使用GPU 多块gpu

    持续监控GPU使用情况命令: $ watch -n 10 nvidia-smi1一.指定使用某个显卡如果机器中有多块GPU,tensorflow会默认吃掉所有能用的显存, 如果实验室多人公用一台服务器 ...

  4. el-tree文本内容过多显示不完全问题（解决）

    布局: <span class="custom-tree-node" slot-scope="{ node, data }"> 外层span 树节点 ...

  5. Redux action 状态

    action  不同的状态,设置不同的action.type [就是一个名字],返回对应的数据 不同的状态返回不同的  接口数据

  6. P1005 等边字符三角形

    题目描述 给定一个字符串,用它构造一个底边长5个字符,高3个字符的等腰字符三角形. 三角形的形状见样例输出. 输入格式 无. 输出格式 输出样例输出中所描述的等腰字符三角形. 样例输入 无. 样例输出 ...

  7. HDU 1358 Period(KMP next数组运用)

    Period Problem Description For each prefix of a given string S with N characters (each character has ...

  8. linux进程互斥等待

    我们已经见到当一个进程调用 wake_up 在等待队列上, 所有的在这个队列上等待的进程 被置为可运行的. 在许多情况下, 这是正确的做法. 但是, 在别的情况下, 可能提前知道 只有一个被唤醒的进程 ...

  9. 【2016常州一中夏令营Day1】

    Problem 1. suffix给定一个单词,如果该单词以 er. ly 或者 ing 后缀结尾,则删除该后缀(题目保证删除后缀后的单词长度不为 0),否则不进行任何操作.Input输入一行,包含一 ...

  10. Stylized Image Caption论文笔记

    Neural Storyteller (Krios et al. 2015) : NST breaks down the task into two steps, which first genera ...