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

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链接： 链接

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（）方法时，缺少+/-。 另外，为防止发生未定义的错误，您应该在first 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）