我正在try 使用HTML的原生popover.我试着使用下面的JavaScript来打开/关闭弹出窗口.
HTML
<div>
<button onclick="handlePopover(event, 'popover-1')">+</button>
<aside id="popover-1" popover="">
<p>My Test</p>
</aside>
</div>
JavaScript
function handlePopover(event, id) {
// Identify the first popover element with the given id
const popover = document.getElementById(id)
// Exit early if no matching popover was found
if (!popover) return
// Get the coordinates of the clicked button
let rect = event.target.getBoundingClientRect()
// Modify the coordinates of the popover
popover.style.left = rect.left + 10 + "px"
popover.style.top = rect.top + 10 + "px"
// Toggle the display state
popover.togglePopover()
}
弹出器正确地切换，并且定位正确.然而，它不会切换关闭时，我点击按钮第二(或第三，或第四…)时间但是请注意，如果我在弹出区域之外而不是在按钮顶部点击弹出窗口，弹出窗口会消失.
第二次点击按钮时，如何隐藏弹出窗口？