javascript - Popper.js 下拉菜单/工具提示的初始位置错误

Question

如果点击触发器，我使用 popper.js 显示更多帖子类别。但是我点击之后，初始位置是错误的(更右)。当 popper 打开并且我滚动 popper 的位置时更新 - 这个状态需要是初始的。

我发现 popper 的 CSS 位置变换对于我的使用计算错误。但不明白，为什么在滚动或任何窗口调整大小后重新计算为正确的数字。检查下面的 Codepen。

我的JS:

$(function () {
 var element = document.getElementById('more-cats');
 var dropdown = document.getElementById('tooltip');

 var catsTooltip = new Popper ( element, dropdown, {
      placement: 'bottom-end'
 });

 $(element).click(function(e) {
      $(dropdown).toggle();
      e.preventDefault();
 });

});

Codepen

谢谢，如果你有一些想法，我的代码哪里写错了。

Answer 1

那是因为 Popper.js 需要在 DOM 中呈现 popper 元素(也就是在文档中有一个位置)才能正确计算其位置。

当元素隐藏时，您正在初始化 Popper.js，然后切换它的可见性以显示它，但 Popper.js 不知道发生了什么变化。

当您滚动页面或调整页面大小时，Popper.js 会更新您的 popper 的位置，因为它默认监听这些事件。

您应该在 .toggle() 之后手动运行 catsTooltip.scheduleUpdate() 以使其正确定位。

https://codepen.io/FezVrasta/pen/PJjWWZ