如果点击触发器,我使用 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();
});
});
谢谢,如果你有一些想法,我的代码哪里写错了。
最佳答案
那是因为 Popper.js 需要在 DOM 中呈现 popper 元素(也就是在文档中有一个位置)才能正确计算其位置。
当元素隐藏时,您正在初始化 Popper.js,然后切换它的可见性以显示它,但 Popper.js 不知道发生了什么变化。
当您滚动页面或调整页面大小时,Popper.js 会更新您的 popper 的位置,因为它默认监听这些事件。
您应该在 .toggle()
之后手动运行 catsTooltip.scheduleUpdate()
以使其正确定位。
关于javascript - Popper.js 下拉菜单/工具提示的初始位置错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46476857/