原生javascript实现二级延时菜单
一、实现原理：
使用定时器和排他思想完成
二、代码：
<!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实现二级延时菜单的更多相关文章
- 云南农职《JavaScript交互式网页设计》 综合机试试卷③——实现二级分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用Jquery和JavaScript实现二级分类菜单管理 点击 ...
- JavaScript(获取或设置html元素的宽,高,坐标)，确定和判断鼠标是否在元素内部，二级导航菜单鼠标离开样式问题解决
设置: document.getElementById('id').style.width=value document.getElementById('id').style.height=va ...
- 原生JavaScript的省市县三级联动
三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...
- Ajax实现动态的二级级联菜单
今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生 JavaScript 实现 state 状态管理系统
原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...
- 利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- 原生javascript 实现 animate
原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...
随机推荐
- Error: Cannot find module 'webpack/bin/config-yargs' 报错原因, webpack@4.X踩的坑~
1 .使用webpack@4.32.2时, 当我通过package.json的script去执行webpack-dev-server时, 报以下错误: Error: Cannot find modu ...
- H3C 帧中继网络拓扑
- Vue 用第三方的库去实现动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 浅谈集合框架六——集合扩展：Arrays工具类、集合与数组相互转换方式；
最近刚学完集合框架,想把自己的一些学习笔记与想法整理一下,所以本篇博客或许会有一些内容写的不严谨或者不正确,还请大神指出.初学者对于本篇博客只建议作为参考,欢迎留言共同学习. 之前有介绍集合框架的体系 ...
- python模块之random模块
random模块 随机模块,用于处理随机问题. import random # 随机整数 print(random.randint(0, 9)) # 0到9之间随机一个整数 print(random. ...
- js基础——对象和数组
1.Object类型 1)使用new运算符 var box = new Object();===>等同于 var box = Object();(省略new关键字) box.name ...
- 使用git命令修改commit提交信息
很多时候我们在提交代码时可能会把commit提交信息写错了,这个时候我们就可以用到下面的git命令来修改commit提交信息 git commit --amend 输入"i"之后进 ...
- codeforces 1217E E. Sum Queries? （线段树
codeforces 1217E E. Sum Queries? (线段树 传送门:https://codeforces.com/contest/1217/problem/E 题意: n个数,m次询问 ...
- Oracle生成批量清空表数据脚本
select 'DELETE FROM ' || a.table_name || '; --' || a.comments from user_tab_comments a where a.table ...
- jQuery无new创建对象原理
// jQuery 无new 创建对象套路 (function(g,undefined){ var foo = function(){ return new foo.fn.init(); }; foo ...