原生js
var op = -1;
document.onkeyup = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
// arguments.callee.caller.arguments[0];???????
var headerSearechZheng = document.getElementById("header-search-zheng");
// var i=0;
if (headerSearechZheng.innerHTML != "") {
switch (e.keyCode) {
case 40:
op++;
if (op > headerSearechZheng.children.length - 1) {
op = headerSearechZheng.children.length - 1;
}
for (let i = 0; i < headerSearechZheng.children.length; i++) {
headerSearechZheng.children[i].className = "";
}
headerSearechZheng.children[op].className = "active";
console.log(op);
break;
case 38:
op--;
if (op < 0) {
op = 0;
}
console.log(op);
for (let i = 0; i < headerSearechZheng.children.length; i++) {
headerSearechZheng.children[i].className = "";
}
headerSearechZheng.children[op].className = "active";
break;
default:
break;
}
}
};
jQuery
var op = -1;
$('.header-search-input').on('keyup', function (event) {
var e = event || window.event;
var headerSearchZheng = $('#header-search-zheng');
if (headerSearchZheng.html() != null) {
switch (e.keyCode) {
case 40:
op++;
if (op > headerSearchZheng.children().length - 1) {
op = headerSearchZheng.children().length - 1;
}
headerSearchZheng.children().eq(op).addClass('active').siblings().removeClass('active');
console.log(op);
break;
case 38:
op--;
if (op < 0) {
op = 0;
}
headerSearchZheng.children().eq(op).addClass('active').siblings().removeClass('active');
break;
default:
break;
}
}
});
// 鼠标事件
$('#header-search-zheng').on('mouseenter','li',function(event){
$('#header-search-zheng li').eq($(this).index()).addClass('active').siblings().removeClass('active');
op=$(this).index();
})