<!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{200px;height:30px;line-height: 30px;margin: 20px auto; text-align: center;} .box span{display: block; 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>