下拉菜单定位

实现原理

下拉菜单需要根据触发按钮的位置智能定位，确保菜单完整显示在视口内。

function positionDropdown(trigger, menu) {
  const triggerRect = trigger.getBoundingClientRect();
  const menuRect = menu.getBoundingClientRect();

  // 默认：左上角对齐，显示在按钮下方
  let top = triggerRect.bottom + 5;
  let left = triggerRect.left;

  // 检查是否超出底部
  if (top + menuRect.height > window.innerHeight) {
    // 改为显示在按钮上方
    top = triggerRect.top - menuRect.height - 5;
  }

  // 检查是否超出右边界
  if (left + menuRect.width > window.innerWidth) {
    // 右对齐
    left = triggerRect.right - menuRect.width;
  }

  // 检查是否超出左边界
  if (left < 0) {
    left = 10;
  }

  menu.style.top = top + 'px';
  menu.style.left = left + 'px';
}

示例：智能下拉菜单

点击按钮打开下拉菜单（会自动避开边界）

总结

• 使用 getBoundingClientRect() 获取按钮位置
• 计算菜单的初始位置
• 检测四个方向的边界
• 动态调整菜单位置和方向
• 确保菜单始终在视口内可见