JavaScript案例——实现下拉菜单

可以利用键盘上下键进行选取，回车键进行选中
思路：
1、获取网页元素
2、输入框获取焦点时显示下拉菜单
3、输入框失去焦点时隐藏下拉菜单
4、键盘上下方向键选择下拉菜单
5、回车键把当前选中菜单文字写入输入框

<!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>ul {list-style: none;padding: 0;margin: 0;}body {background: #23384e;font: 12px/1.5 \5fae\8f6f\96c5\9ed1;}.search,.search .inner-box,.search .box,.search .select,.search a {background: url(../images/search.jpg) no-repeat;}.search,.search .box,.search .inner-box {height: 34px;}.search {position: relative;width: 350px;margin: 10px auto;}.search .box {background-position: right 0;}.search .inner-box {background-repeat: repeat-x;background-position: 0 -34px;margin: 0 20px 0 40px;}.search .select {float: left;color: #fff;width: 190px;height: 22px;border: none;cursor: pointer;margin-top: 4px;line-height: 22px;padding-left: 10px;background-position: 0 -68px;}.search a {float: left;width: 80px;height: 24px;color: #333;letter-spacing: 4px;line-height: 22px;text-align: center;text-decoration: none;background-position: 0 -90px;margin: 4px 0 0 10px;}.search a:hover {color: #f60;background-position: -80px -90px;}.search ul {position: absolute;top: 26px;left: 40px;color: #fff;width: 198px;background: #2b2b2b;border: 1px solid #fff;display: none;}.search ul li {height: 25px;line-height: 24px;cursor: pointer;padding-left: 10px;margin-bottom: -1px;border-bottom: 1px dotted #fff;}.search ul li:hover,.search ul li.active {background: #8b8b8b;}</style></head><body><div class="search"><div class="box"><div class="inner-box"><inputtype="text"id="keyword"class="select"autocomplete="off"placeholder="请选择游戏名称"/><a href="#">搜索</a></div></div><ul><li>地下城与勇士</li><li>魔兽世界（国服）</li><li>魔兽世界（台服）</li><li>热血江湖</li><li>大话西游II</li><li>QQ幻想世界</li><li>幻想世界</li></ul></div><script>window.onload = function() {//1、获取页面元素var keyword = document.querySelector("#keyword");var ul = document.querySelector("ul");var lis = document.querySelectorAll("li");//2、输入框获取焦点时显示下拉菜单keyword.onfocus = function() {ul.style.display = "block";//定义lis的索引var index = -1;//给keyword绑定 就键盘抬起来事件//4、键盘上下方向键选择下拉菜单keyword.onkeyup = function(e) {//上键====38if (e.which === 38) {index--;if (e.index < 0) {index = lis.length - 1;}for (var i = 0; i < lis.length; i++) {lis[i].className = "";}lis[index].className = "active";}//下键===40if (e.which === 40) {index++;if (index > lis.length - 1) {index = 0;}for (var i = 0; i < lis.length; i++) {lis[i].className = "";}lis[index].className = "active";}//5、回车键把当前选中菜单文字写入输入框//回车键===13if (e.which === 13) {keyword.valuie = lis[index].innerHTML;//把数据添加到keyword中之后，把keyword失去焦点keyword.blur();}};};//3、输入框失去焦点时隐藏下拉菜单keyword.onblur = function() {ul.style.display = "none";};};</script></body>
</html>

背景图

效果图

JavaScript案例——实现下拉菜单相关推荐

JavaScript实现select下拉菜单省份和城市的级联菜单
使用JavaScript中变量定义省份及对应的城市,应用select标签对象,实现二级级联的下拉菜单选中效果.即在省份下拉菜单中选中一个省份时,在城市下拉菜单中出现该省份对应的城市. HTML代码: ...
javascript 二级动态下拉菜单选项
</tr> <script language = "JavaScript"> var onecount2; subcat2 = new Array(); o ...
JavaScript操作select下拉菜单全集合
// 1.判断select选项中是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItem ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
简单下拉菜单html,JavaScript简单下拉菜单实例代码
本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最 ...
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...
Bootstrap下拉菜单
前面的话网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
ASP二级联动下拉菜单
ASP+JavaScript+数据库级联下拉菜单 <!-- *********************************** ASP+JavaScript+数据库级联下拉菜单 **** ...
JavaScript实现下拉菜单操作
JavaScript实现下拉菜单操作案例分析: (1)该操作分为两个部分,导航栏和下拉菜单部分,因此需要使用嵌套,一共使用两对ul和li标签,外面的ul构成导航栏框架,在li里面一一对应另一对ul和 ...

JavaScript案例——实现下拉菜单

JavaScript案例——实现下拉菜单相关推荐

最新文章

热门文章