位于不同位置的不同元素上具有相同的 html 弹出窗口

Question

我有一个下拉列表，我希望在许多不同的元素下使用 html popover API 显示/隐藏它。问题是popover使用id来检测目标，显然我不能在多个元素上使用一个id。有没有办法解决这个问题，这样我就不需要对每个元素使用不同的 id 进行硬编码？

这是我想在多个不同的元素上使用的下拉菜单：

<div popover id="menu">
    ..dropdown content...
</div>

我在不同的元素上都有这个按钮：

<button id="btn" popovertarget="menu"></button>

所以我想要的是能够打开/关闭下拉菜单，特定于单击 btn 的元素。如下所示：

<!-- element 1 -->
<div>
  <button id="btn" popovertarget="menu"></button>
  <div popover id="menu">
    ..dropdown content - same for all elements...
  </div>
</div>

<!-- element 2 -->
<div>
  <button id="btn" popovertarget="menu"></button>
  <div popover id="menu">
    ..dropdown content - same for all elements...
  </div>
</div>

<!-- element 3 -->
<div>
  <button id="btn" popovertarget="menu"></button>
  <div popover id="menu">
    ..dropdown content - same for all elements...
  </div>
</div>

通过执行上述操作，只有一个 btn 可以显示/隐藏下拉菜单，这不是我想要的。

Answer 1

您可以使用 showPopover、hidePopover 方法来使用 JS 而不是直接使用 html 显示/隐藏 popover。 这将允许您从多个元素定位相同的弹出窗口，并使用目标元素设置它的位置。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover