【JS】模拟下拉菜单

鼠标点击时，下拉菜单出现
鼠标划过或按键盘上下箭头时，选中的菜单背景色变化，选项内容显示在输入框内
鼠标点击或按下回车或空格键时，对应的内容显示在输入框内且下拉菜单消失

效果图

HTML

 <div id="cont"><input type="text" name="" id="txt" value="" /><ul><li>选项1</li><li>选项2</li><li>选项3</li><li>选项4</li><li>选项5</li><li>选项6</li></ul></div>

CSS

<style type="text/css">* {margin: 0;padding: 0;list-style: none;}#cont {width: 300px;margin: 40px auto;}input {width: 296px;height: 40px;}ul {background: #eee;display: none;}ul li {line-height: 30px;text-indent: 20px;border-bottom: solid 1px black;}ul li.active {background: #ccc;}</style>

JS

var input = document.querySelector('input');var ul = document.querySelector('ul');var li = document.querySelectorAll('li');var index = -1;//输入框获取焦点时，所有的下拉菜单出现input.onfocus = function () {ul.style.display = 'block';}//输入框失去焦点时，所有的下拉菜单出现input.onblur = function () {ul.style.display = 'none';}//鼠标滑过时，对应的li背景色改变，li内容显示在输入框中li.forEach(function (li, key) {//鼠标移入li.onmouseover = function overFn() {var res1 = document.querySelector('.active');res1 && (res1.className = "");input.value = this.innerText;this.className = 'active';index = key;};li.onmouseout = outFn;//鼠标移出})//鼠标移出function outFn() {this.className = '';}//键盘上下键选择  上38，下40//按上键时，索引--，对应的li背景色改变，li内容显示在输入框中//按下键时，索引++，对应的li背景色改变，li内容显示在输入框中input.onkeydown = function (eve) {eve = eve || window.event;select(eve);}function select(eve) {var tops = eve.keyCode;var res = document.querySelector('.active');res && (res.className = "");for (var i = 0; i < li.length; i++) {li[i].className = '';}if (eve.keyCode == 38) {index--;if (index < 0) {index = li.length - 1}}if (eve.keyCode == 40) {index++;if (index > li.length - 1) {index = 0;}}if (eve.keyCode == 32 || eve.keyCode == 13) {if (index == -1) {input.value = '';} else {input.value = li[index].innerText;}ul.style.display = 'none'}if (eve.keyCode == 8) {index = -1;}if (index != -1) {li[index].className = 'active';input.value = li[index].innerText;} else {input.value = '';}console.log(eve.keyCode);}

【JS】模拟下拉菜单相关推荐

php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
Js模拟下拉框（select-option）的实现
js模拟下拉框今天想给大家分享一下之前自己做的一个js模拟下拉框,所有select-option中我能发现的操作,都在我的代码中将其实现,希望对大家有所帮助.如果select中还有一些本人未实现的希 ...
用JS控制下拉菜单效果
今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写 ...
使用Jquery、HTML、CSS、JS实现下拉菜单列表
下拉菜单列表当鼠标进入时,效果如下: 鼠标离开时,下拉列表进行隐藏.效果如下: 下面展示代码 // <!DOCTYPE html> <html lang="en" ...
html JS实现下拉菜单,vue.js怎么实现下拉框
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现下拉框的方法: www.php.cn vue下拉框 {{x.name}}{{x.famname}} {{on ...
用JS实现下拉菜单效果
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>下拉菜 ...
原生JS实现下拉菜单操作
原生JavaScript实现下拉菜单的操作逻辑分析: (1)该布局实现分为两个部分,导航栏部分以及下拉菜单部分,因此我们需要使用标签的嵌套,一共使用两对ul和li标签,外面的ul构成导航栏的框架,在 ...
js获取下拉菜单的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test" name=" ...

【JS】模拟下拉菜单

效果图

HTML

CSS

JS

【JS】模拟下拉菜单相关推荐

最新文章

热门文章