一、实现原理：

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

二、代码：

<!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. TabHost选项卡的实现（一）：使用TabActivity实现

    一. TabHost的基本开发流程 TabHost是一种非常实用的组件,可以很方便的在窗口上防止多个标签页,每个标签页相当于获得了一个外部容器相同大小的组件摆放区域. 我们熟悉的手机电话系统" ...

  2. 利用谓词实现List<>的Find等高级操作

    public class Person        {            public int Id { get; set; }            public string Name { ...

  3. MAMP "403 Forbidden You don't have permission to access / on this server."

    2015年01月22日 17:27:31 阅读数:3488 用MAMP搭建本地服务器的时候,设置好ip和端口等属性之后,浏览器访问,报 403错误: Forbidden You don't have ...

  4. java 综合示例代码

    package javaenhance.src.cn.itcast.day3; import java.lang.reflect.Constructor; import java.lang.refle ...

  5. Vue中的scoped及穿透方法（修改第三方组件局部的样式）

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  6. AI百度接口以及图灵接口的使用

    百度AI接口 AI智能种类方向 耳朵 = 倾听 = 麦克风 = 语音识别 ASR:Automatic Speech Recognition 嘴巴 = 诉说 = 扬声器 = 语音合成 TTS:Text ...

  7. C# 获取 PC 序列号

    在 C++ 需要使用 GetSystemFirmwareTable 的方法来获得 PC 的序列号,需要写的代码很多,但是在 C# 可以使用 WMI 来拿到序列号 首先是安装 System.Manage ...

  8. 头条面试题-创建一个Event类，并创建on、off、trigger、once方法

    一.创建一个Event.js class Event { constructor() { this.handlers = { // 记录所有的事件和处理函数 } } /* * * on 添加事件监听 ...

  9. C# Abort() 多线程运行逻辑

    / Thread t ; Thread t2: t.Abort()执行后,会阻止主线程继续运行,但是不会影响t2线程的执行. static void Main(string[] args) { Con ...

  10. 使用 koa-router 路由拆分

    根据功能不同,将路由拆分到不同的模块 目录结构: app.js const Koa = require('koa'); const Router = require('koa-router'); co ...