使用向下箭头选择下一个列表项

Question

给定一个div列表，我需要能够使用向上和向下箭头键在列表中的项目之间导航，将.ag-menu-option-active类应用于当前选定的项目，并在Enter键上触发对当前所选列表项的单击。

我目前能够迭代项目列表，但在向下箭头上，它只记录列表中的第二个项目。如上所述，用户应该能够在列表中上下移动，并将活动类应用于当前选定的项。当用户点击Enter键时，应单击关联的列表项。

let columnMenuItems = document.querySelectorAll('.ag-menu-option');
document.addEventListener('keydown', e => {
if (e.key === 'ArrowDown') {
for (let i = 0; i < columnMenuItems.length; i++) {
if (columnMenuItems[i].classList.contains('ag-menu-option-active') === true) {
console.log("MENU OPTION SELECTED: ", columnMenuItems[i + 1])
columnMenuItems[i].click();
break;
}
}
}
});

JSFiddle link： link

Answer 1

if(columnMenuItems[i+1] !== undefined){
//add class to next 
columnMenuItems[i+1].className= "ag-menu-option ag-menu-option-active"
columnMenuItems[i].className= "ag-menu-option"
}

您可以编写一些其他逻辑来添加和删除类，但这应该适用于向下箭头。

Answer 2

调用 .click(( 方法时缺少 +/-; 同样为了防止未定义的错误，您应该首先在 for 循环中添加 columnMenuItems-1。

代码应如下所示 -

if (e.key === 'ArrowDown') {
for (let i = 0; i < columnMenuItems.length-1; i++) {
if (columnMenuItems[i].classList.contains('ag-menu-option-active') === true) {
console.log("MENU OPTION SELECTED: ", columnMenuItems[i + 1]);
columnMenuItems[i].classList.remove('ag-menu-option-active');
columnMenuItems[i + 1].click();
columnMenuItems[i+1].classList.add('ag-menu-option-active');
break;
}
}
}
if (e.key === 'ArrowUp') {
for (let i = columnMenuItems.length - 1; i > 0; i--) {
//console.log("MENU OPTIONS: ", columnMenuItems[i]);
if (columnMenuItems[i].classList.contains('ag-menu-option-active') === true) {
columnMenuItems[i].classList.remove('ag-menu-option-active');
//if (e.key === 'Enter') {
columnMenuItems[i - 1].click();
columnMenuItems[i-1].classList.add('ag-menu-option-active');
//}
break;
}
}
}

在这里测试它(jsfiddle(