Question

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

我目前能够遍历项目列表，但是在向下箭头上，它仅注销列表中的第二个项目。如上所述，用户应该能够在列表中上移和下移，并将活动类别应用于当前选定的项目。当用户按下Enter键时，应单击关联的列表项。

Enter

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

测试here (jsfiddle)

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

2 个答案: