js模拟下拉菜单
时间:2019-08-28
本文章向大家介绍js模拟下拉菜单,主要包括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>
原文地址:https://www.cnblogs.com/hy96/p/11425117.html
- 5.训练模型之利用训练的模型识别物体
- KMP算法学习(详解)
- 查找算法的实现(C/C++实现)
- HDU 1495 非常可乐(数论,BFS)
- Selenium2+python自动化74-jquery定位
- 用php实现简单的自制计算器
- Selenium2+python自动化75-Chrome配置加载
- Selenium2+python自动化75-非input文件上传(SendKeys)
- python接口自动化11-post传data参数案例
- POJ 1321 棋盘问题(DFS板子题,简单搜索练习)
- python接口自动化12-案例分析(csrfToken)
- Python基础学习笔记
- POJ 3278 Catch That Cow(BFS,板子题)
- 【请您听我说】PHP语法特点的一些看法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- map + pair用法练习
- 蛇形矩阵
- 【SpringBoot WebFlux 系列】 header 参数解析
- URL 去重的 6 种方案!(附详细实现代码)
- 原生JS封装拖动验证滑块你会吗?
- 企业远程视频会议云服务EasyRTC-SFU版本支持 https 功能设计逻辑
- python之编码解码、字符串常用方法
- python之列表
- 一文带你深入理解Mysql索引底层数据结构与算法
- CGI & FastCGI
- 可输出sql的PrepareStatement封装
- spring mvc基础配置
- spring 事务管理方式及配置
- spring 整合 ActiveMQ
- Spring 配置请求过滤器,编码格式设为UTF-8,避免中文乱码