js模拟下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{width:200px;height:30px;line-height: 30px;margin: 20px auto;
text-align: center;}
.box span{display: block;width: 200px;line-height: 30px;border: solid 1px black;}
.box ul{margin: 0;padding: 0;list-style: none;overflow: auto;border: solid 1px black;border-top:none;display: none;}
.box ul li{padding: 0 6px;}
.box ul li.active{background: #35f;color: #fff;}
</style>
</head>
<body>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> <div class="box">
<span>北京</span>
<ul>
<li class="active">北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>杭州</li>
<li>西安</li>
<li>...</li>
</ul>
</div>
</body>
<script>
var ospan = document.querySelector(".box span");
var oul = document.querySelector(".box ul");
var ali = document.querySelectorAll(".box ul li"); // 6.设置默认显示项的索引
var index = 2;
// 根据默认的索引，设置默认内容
ospan.innerHTML = ali[index].innerHTML;
// 下拉菜单的当前项
setActive(); // 2.设置下拉菜单的显示或隐藏状态：0为显示，1为隐藏
var i = 0;
// 1.绑定显示框的点击事件
ospan.onclick = function(eve){
// 5.阻止事件冒泡
eve.stopPropagation();
// 3.根据状态显示或隐藏，同时别忘记修改状态
if(i == 0){
oul.style.display = "block";
// 9.每次打开时根据最新索引，设置当前项
setActive();
i = 1;
}else{
oul.style.display = "none";
i = 0;
}
} // 4.点击空白隐藏，同时别忘记修改状态
document.onclick = function(){
oul.style.display = "none";
i = 0;
} for(var j=0;j<ali.length;j++){
// 8.提前给li绑定索引，方便后面设置索引
ali[j].index = j; // 7.鼠标经过li事件
ali[j].onmouseover = function(){
index=this.index//将鼠标与键盘玩到一起
// 取消所有，显示当前
for(var k=0;k<ali.length;k++){
ali[k].className = "";
}
// 注意：this就是鼠标经过的元素
this.className = "active";
}
// 8.li的点击事件
ali[j].onclick = function(){
// 设置内容
ospan.innerHTML = this.innerHTML;
// 修改索引
index = this.index;
}
}
document.onkeydown = function(eve){
console.log(index)
var e=eve||window.event;
console.log(e);
if(e.keyCode==38){
if(index==0){
index=0
}
else{
index--
}
setActive()//修改li中的当前项；
}
if(e.keyCode==40){
if(index==ali.length-1){
index=ali.length-1
}
else{
index++
}
setActive()//修改li中的当前项；
}
if(eve.keyCode == 13){
// K8.回车隐藏下拉菜单，同时设置状态
oul.style.display = "none";
i = 0;
ospan.innerHTML = ali[index].innerHTML;
} } // 功能1：根据索引设置当前项
function setActive(){
for(var k=0;k<ali.length;k++){
ali[k].className = "";
}
ali[index].className = "active";
}
</script>
</html>
js模拟下拉菜单的更多相关文章
- js模拟下拉菜单-键盘、鼠标（代码详解）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js版本下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现下拉菜单的功能
<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...
- bootstrap和JS实现下拉菜单
// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...
- js实现下拉菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js二级下拉菜单
看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...
- AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...
随机推荐
- AdaptSegeNet 代码分析
先G后D 训练 G: --S:pred1, pred2 = model(images) : loss_seg1 = loss_calc(pred1, labels) : loss.backwar ...
- 【逆向】Magniber 勒索软件样本分析
.wiz-editor-body .wiz-code-container { position: relative; padding: 8px 0; margin: 5px 0; text-inden ...
- PTA1003 我要通过！ (20 分)
PTA1003 我要通过! (20 分) "答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的"答案正确"大派送 -- 只要读入的字符串满足下 ...
- ceph 因权重问题导致pgs active+clean+remapped 状态
1.现象: 2.原因:是因为前期权重调整不合理导致,调整回来就正常了 3.操作步骤: ceph osd crush reweight osd.2 0.98317 # osd 位置. 权重值 权重 ...
- play() failed because the user didn‘t interact with the document first
使用js调用音频文件报错,错误信息如下:play() failed because the user didn't interact with the document first该报错是浏览器对于自 ...
- echarts属性大全
// 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...
- idea 改变片段内相同变量的快捷键
在 win系统中 shift+F6 在 ios系统中Fn+shift+F6
- hdu: 改革春风吹满地（叉乘求面积）
Problem Description" 改革春风吹满地,不会AC没关系;实在不行回老家,还有一亩三分地.谢谢!(乐队奏乐)" 话说部分学生心态极好,每天就知道游戏,这次考试如此简 ...
- link和@import的对比
概念的区别 @import 是css的语法规则: link 是HTML标签 用途的区别 @import 是css语法,只能用来导入样式文件: link 除了引入样式,还可引入其他资源文件 加载顺序 ...
- 移动服务（f[i] [j] [k],这三个人，位置为a[i],j,k的最小价值）
移动服务(f[i] [j] [k],这三个人,位置为a[i],j,k的最小价值) 题意 给出点之间到达价值,使用3个人处理一个序列,f[i] [j] [k],这三个人,每次处理序列中一个值,三个人中一 ...