一、实现原理：

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

二、代码：

<!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. 2012-2013 Northwestern European Regional Contest (NWERC 2012)

    B - Beer Pressure \(dp(t, p_1, p_2, p_3, p_4)\)表示总人数为\(t\),\(p_i\)对应酒吧投票人数的概率. 使用滚动数组优化掉一维空间. 总的时间复杂 ...

  2. 通过PdfiumViewer.dll实现pdf直接从流显示（效果不好）

    开源的PdfiumViewer.dll并不完整 需要不开源的pdfium.dll配合使用 引用只需添加PdfiumViewer.dll,但pdfium.dll必须跟它放在一个路径下 界面中添加控件: ...

  3. svcs (service status) 和 svcadm (service administration) 使用

    1. svcs  显示服务实例的状态信息 svcs - report service status  显示服务状态命令 DESCRIPTION The svcs command displays in ...

  4. 2018-8-10-win10-uwp-后台获取资源

    title author date CreateTime categories win10 uwp 后台获取资源 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 ...

  5. C# 标准性能测试

    经常我写一个类,作为一个工具类,小伙伴会问我这个类的性能,这时我就需要一个标准的工具进行测试. 本文告诉大家如何使用 benchmarkdotnet 做测试. 现在在 github 提交代码,如果有小 ...

  6. 2019-11-6-Roslyn-how-to-use-WriteLinesToFile-to-write-the-semicolons-to-file

    title author date CreateTime categories Roslyn how to use WriteLinesToFile to write the semicolons t ...

  7. 【47.40%】【BZOJ 1875】[SDOI2009]HH去散步

    Time Limit: 20 Sec  Memory Limit: 64 MB Submit: 1363  Solved: 646 [Submit][Status][Discuss] Descript ...

  8. jq 技巧汇总

    1,jQuery方法$()实际上是拥有两个参数的 $('li','.firstEl').onclick(function(){.......})   这里,第二个参数用来限制第一个参数给定的查找结果 ...

  9. koa2实现简单的验证码

    //首先引入svg-captcha,https://www.npmjs.com/package/svg-captcha const svgCaptcha = require('svg-captcha) ...

  10. git 上传当前分支

    因为我现在的分支是的名很长,每次需要上次当前分支需要写很多代码,是不是有很简单方法上传当前分支. 如果要上传一个分支到仓库 origin 那么就需要使用下面的命令 git push origin 分支 ...