Angular 5自定义下拉菜单如何实现箭头导航功能？

我刚好做过类似的需求，给你一套完整的实现方案，包含HTML、CSS和JavaScript，完全满足你要的键盘导航、选中逻辑和高亮状态，一步步来：

1. 基础HTML结构 #

首先我们需要一个触发按钮和下拉菜单容器，选项用列表项承载，给每个选项加data-value存储实际值，方便后续业务逻辑使用：

<div class="custom-dropdown">
  <button class="dropdown-trigger" id="dropdownTrigger">选择选项</button>
  <ul class="dropdown-menu" id="dropdownMenu">
    <li class="dropdown-item" data-value="option1">选项1</li>
    <li class="dropdown-item" data-value="option2">选项2</li>
    <li class="dropdown-item" data-value="option3">选项3</li>
    <li class="dropdown-item" data-value="option4">选项4</li>
  </ul>
</div>

2. CSS样式处理 #

接下来写样式，控制菜单的显示隐藏、默认外观，以及悬浮/键盘导航时的高亮状态：

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  width: 100%;
  max-height: 200px; /* 限制高度，超出自动滚动 */
  overflow-y: auto;
  display: none; /* 默认隐藏菜单 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 悬浮和键盘导航时的高亮状态 */
.dropdown-item.active,
.dropdown-item:hover {
  background-color: #f5f5f5;
}

/* 菜单显示的激活类 */
.dropdown-menu.open {
  display: block;
}

这里给菜单加了滚动限制，避免选项太多时溢出页面；用transition让高亮状态切换更平滑，提升交互质感。

3. JavaScript核心逻辑 #

这部分是实现键盘导航和选中功能的关键，我们需要处理菜单的展开收起、键盘事件监听、高亮状态管理、选中逻辑，还有点击外部关闭菜单的交互：

const trigger = document.getElementById('dropdownTrigger');
const menu = document.getElementById('dropdownMenu');
const items = Array.from(menu.querySelectorAll('.dropdown-item'));
let currentIndex = -1; // 初始无选中项，-1表示未聚焦任何选项

// 切换菜单显示/隐藏
function toggleMenu() {
  menu.classList.toggle('open');
  if (menu.classList.contains('open')) {
    currentIndex = -1; // 打开菜单时重置选中索引
    trigger.focus(); // 保持触发按钮焦点，方便后续键盘操作
  } else {
    resetActiveItem(); // 关闭时清除所有高亮
  }
}

// 重置所有选项的高亮状态
function resetActiveItem() {
  items.forEach(item => item.classList.remove('active'));
  currentIndex = -1;
}

// 设置指定索引的选项为高亮状态
function setActiveItem(index) {
  resetActiveItem();
  if (index >= 0 && index < items.length) {
    currentIndex = index;
    items[index].classList.add('active');
    // 自动滚动到当前高亮项，避免被菜单容器遮挡
    items[index].scrollIntoView({ block: 'nearest' });
  }
}

// 处理选项选中逻辑
function selectItem(item) {
  const value = item.dataset.value;
  const text = item.textContent.trim();
  // 更新触发按钮的显示文本
  trigger.textContent = text;
  // 这里可以添加自定义业务逻辑，比如触发事件、调用接口等
  console.log('选中的选项值:', value, '文本:', text);
  toggleMenu(); // 选中后自动关闭菜单
}

// 点击触发按钮切换菜单
trigger.addEventListener('click', toggleMenu);

// 点击选项时执行选中逻辑
items.forEach(item => {
  item.addEventListener('click', () => selectItem(item));
});

// 监听键盘事件，处理导航和选中
document.addEventListener('keydown', (e) => {
  // 菜单未打开时不处理键盘事件
  if (!menu.classList.contains('open')) return;

  switch(e.key) {
    case 'ArrowDown':
      e.preventDefault(); // 阻止页面默认滚动行为
      // 导航到下一项，循环回到开头
      currentIndex = (currentIndex + 1) % items.length;
      setActiveItem(currentIndex);
      break;
    case 'ArrowUp':
      e.preventDefault();
      // 导航到上一项，循环回到结尾
      currentIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
      setActiveItem(currentIndex);
      break;
    case 'Enter':
      e.preventDefault();
      // 如果有高亮选项，执行选中逻辑
      if (currentIndex >= 0) {
        selectItem(items[currentIndex]);
      }
      break;
    case 'Escape':
      // 按ESC键关闭菜单
      toggleMenu();
      break;
  }
});

// 点击菜单外部区域关闭菜单
document.addEventListener('click', (e) => {
  if (!trigger.contains(e.target) && !menu.contains(e.target)) {
    toggleMenu();
  }
});

关键细节说明： #

• currentIndex：用来跟踪当前键盘导航到的选项索引，初始值-1表示未聚焦任何选项
• setActiveItem：不仅切换高亮类，还会自动滚动到当前项，确保菜单有滚动条时用户能看到高亮选项
• 阻止默认键盘行为：比如ArrowDown默认会让页面滚动，用e.preventDefault()避免干扰下拉菜单的导航
• 点击外部关闭：符合常规下拉菜单的交互习惯，提升用户体验

可选无障碍增强 #

如果需要更好的屏幕阅读器支持，可以给元素添加ARIA属性：

• 给触发按钮加aria-haspopup="true"和动态更新的aria-expanded（true/false）
• 给菜单加aria-labelledby关联触发按钮的ID
• 给选项加role="option"

这样无障碍用户也能正常使用这个下拉菜单。

内容的提问来源于stack exchange，提问作者mr__brainwash