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:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...
随机推荐
- java 操作PDF （spire.pdf）api
https://www.e-iceblue.cn/pdf_java_image_shapes/replace-image-with-new-image-in-pdf-in-java.html mave ...
- PSO 算法的变体python实现
上演化计算课的时候老师让我们实现EOPSO算法(一种精英反向的粒子群优化算法),下面是他的算法步骤: 首先我们需要知道一些基础知识: (1)基础PSO算法 (2)精英反向解 import numpy ...
- anaconda的环境变量
参考: (40条消息) Anaconda 环境变量手动设置(详细)_一夜星尘的博客-CSDN博客_anaconda环境变量手动设置
- PTA两个有序链表序列的合并
本题要求实现一个函数,将两个链表表示的递增整数序列合并为一个非递减的整数序列. 函数接口定义: List Merge( List L1, List L2 ); 其中List结构定义如下: ...
- VueUse实用工具
1.安装 npm i @vueuse/core 2.使用 useClipboard 剪贴板 <script setup lang="ts"> import { ref ...
- .NET 5 WPF 配置文件变动 程序自动刷新 （reloadOnChange）
using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.Configuration; using Microsoft.Extens ...
- VSCode-关于自动格式化问题
Code ->首选项 ->设置 ,在搜索框上输入"格式化" 设置格式化后挂号会自动补齐,关键字会自动添加空格,
- The difference of src and href
href是Hypertext Reference的缩写,表示超文本引用.用来建立当前元素和文档之间的链接.常用的有:link.a.例如: <link href="reset.css&q ...
- linux命令补充
1.nohup nohup /usr/local/node/bin/node /www/im/chat.js >> /usr/local/node/output.log 2>& ...
- Unity检测鼠标是否与UI交互
在Unity项目中,假设在鼠标按键时会触发游戏内的操作,但是在鼠标与UI进行交互时我们希望停止游戏中的操作,这是需要使用EventSystem中的方法来检测鼠标是否正在与UI交互 private bo ...