Popper.js dropdown/tooltip錯誤的初始位置

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