如何使用原生JavaScript替代jQuery UI的position()定位函数

不需要引入额外库，用原生DOM API就能完全复现你现有代码的定位逻辑，全程不需要修改原有HTML结构，只需要先给动态生成的dropDownDiv加一行基础CSS保证定位生效：

/* 替换成你实际给下拉div用的选择器即可 */
your-dropdown-class {
  position: absolute;
  /* 原有样式全部保留，不需要改 */
}

核心API对应关系 #

你用到的jQuery/jQuery UI方法全部有原生对等实现，行为完全一致：

• $(el).closest('li') → 原生el.closest('li')，所有现代浏览器原生支持
• $(el).position() → 取el.offsetLeft/el.offsetTop，就是元素相对于最近定位父级的偏移值，和jQuery返回值一致
• $(el).outerHeight() → 原生el.offsetHeight，默认包含padding、border，和无参数调用outerHeight的结果完全相同
• DOM插入、样式修改方法都有原生对等实现，不需要额外封装

改造后完整代码 #

直接替换原来的jQuery代码段即可：

if (thingType == "story") {
  // 把下拉插到voterEl最近的li节点后面
  voterEl.closest("li").after(dropDownDiv);

  // 复现jQuery UI position逻辑：下拉左上角对齐voterEl左下角，偏移-2px -2px，无碰撞处理
  const voterRect = voterEl.getBoundingClientRect();
  const positionedParent = dropDownDiv.offsetParent || document.body;
  const parentRect = positionedParent.getBoundingClientRect();
  // 计算相对定位父级的坐标
  let posLeft = voterRect.left - parentRect.left - 2;
  const posTop = voterRect.bottom - parentRect.top - 2;
  dropDownDiv.style.top = `${posTop}px`;

  // 原逻辑最后覆盖left值，和voterEl左对齐
  posLeft = voterEl.offsetLeft;
  dropDownDiv.style.left = `${posLeft}px`;
} else {
  // 把菜单插到评论外层避免继承透明度
  const voterPos = {
    left: voterEl.offsetLeft,
    top: voterEl.offsetTop
  };
  // 下拉追加到voterEl的父节点
  voterEl.parentElement.append(dropDownDiv);
  // 设置坐标：左对齐voterEl，顶部在voterEl下方
  dropDownDiv.style.left = `${voterPos.left}px`;
  dropDownDiv.style.top = `${voterPos.top + voterEl.offsetHeight}px`;
}

注意事项 #

• 你原来的代码里collision设置为none，不需要做视口边界检测、位置翻转的额外逻辑，上面的代码完全匹配原有行为
• 原有设置的z-index、其他样式全部保留即可，定位效果和原来用jQuery UI实现的没有视觉差异
• 所有用到的原生API兼容Chrome、Firefox、Edge、Safari 9及以上版本，不需要做polyfill处理

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