*{
padding: 0;
margin: 0;
}
p{
width: 300px;
height: 30px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 30px;
line-height: 30px;
text-indent: 1em;
}
ul{
width: 300px;
border: 1px solid #000;
border-top: 0;
margin: 0 auto;
display: none;
}
ul li{
list-style: none;
height: 30px;
line-height: 30px;
text-indent: 1em;
}
ul li.active{
background: blue;
}
//1.获取节点
var pObj = document.querySelector("p");
var ulObj = document.querySelector("ul");
var liObj = ulObj.children;
//设置pObj状态初始值
var pObjStatus = 0;
//设置鼠标滑过和键盘按下初始值
var cssIndex = htmlIndex = 0;
setActive(cssIndex);
pObj.innerHTML = liObj[htmlIndex].innerHTML;
//2.给pObj绑定onclick事件,第一次点击时ulObj出现,第二次点击时ulObj消失
pObj.onclick = function(eve){
var e = eve || window.event;
//此时点击pObj会出现事件冒泡,向上传递,触发document的点击事件,所以要阻止事件冒泡
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
if(pObjStatus == 0){
ulObj.style.display = "block";
pObjStatus = 1;
}else{
ulObj.style.display = "none";
pObjStatus = 0;
}
}
//3.点击document时ulObj消失,pObj的状态回到初始值
document.onclick = function(){
ulObj.style.display = "none";
pObjStatus = 0;
}
//4.遍历liObj,绑定事件
for(var j = 0;j < liObj.length;j++){
//提前存放liObj的索引
liObj[j].index = j;
liObj[j].onmouseover = function(){
cssIndex = this.index;
//把当前鼠标操作的对象的className设置为active,其他的设置为空
for(var k = 0;k < liObj.length;k++){
liObj[k].className = "";
}
this.className = "active";
}
liObj[j].onclick = function(){
//liObj遍历的对象点击的时候把当前对象的值赋值给pObj
pObj.innerHTML = this.innerHTML;
//把当前对象的索引赋值给htmlIndex
htmlIndex = this.index;
}
}
//5.绑定键盘按下事件
document.onkeydown = function(eve){
var e = eve || window.event;
var code = e.keyCode || e.which;
//如果未出现下拉列表,则不执行键盘按下事件
if(pObjStatus == 0) return;
//判断键盘按下上键
if(code == 38){
htmlIndex = cssIndex;
if(htmlIndex == 0){
htmlIndex = 0;
cssIndex = 0;
}else{
htmlIndex--;
cssIndex--;
}
setActive(cssIndex);
pObj.innerHTML = liObj[htmlIndex].innerHTML;
}
//判断键盘按下下键
if(code == 40){
htmlIndex = cssIndex;
if(htmlIndex == liObj.length - 1){
htmlIndex = liObj.length - 1;
cssIndex = liObj.length - 1;
}else{
htmlIndex++;
cssIndex++;
}
setActive(cssIndex);
pObj.innerHTML = liObj[htmlIndex].innerHTML;
}
//判断键盘按下回车键
if(code == 13){
ulObj.style.display = "none";
pObjStatus = 0;
}
}
//根据索引设置当前项的样式
function setActive(idx){
for(var i= 0;i < liObj.length;i++){
liObj[i].className = "";
}
liObj[idx].className = "active";
}