时间戳

首页 > 解决方案 > 使用向下箭头选择下一个列表项

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

问题描述

给定一个 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链接：链接

标签： javascript

解决方案

You were missing the +/- when you are calling .click() method; Also to prevent the undefined error you should add columnMenuItems-1 in first for loop.

Code should look like this -

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;
      }
    }
  }

Test it here (jsfiddle)

推荐阅读