如何用同一HTML Popover API实现多元素专属下拉菜单控制？

方案1：通过JavaScript手动关联同级Popover #

不依赖ID，直接通过DOM关系定位目标popover，适合批量复用相同结构的菜单。

实现步骤 #

• 给所有触发按钮统一加类（比如popover-trigger），给所有popover统一加类（比如popover-menu）
• 监听按钮点击事件，找到当前按钮的同级popover元素，调用其切换方法

<!-- 可无限复用的分组结构 -->
<div class="popover-group">
  <button class="popover-trigger">打开菜单</button>
  <div popover class="popover-menu">
    <p>下拉菜单内容</p>
    <button>选项1</button>
    <button>选项2</button>
  </div>
</div>

<div class="popover-group">
  <button class="popover-trigger">打开菜单</button>
  <div popover class="popover-menu">
    <p>下拉菜单内容</p>
    <button>选项1</button>
    <button>选项2</button>
  </div>
</div>

<script>
document.querySelectorAll('.popover-trigger').forEach(btn => {
  btn.addEventListener('click', () => {
    // 定位当前按钮的同级popover元素
    const popover = btn.nextElementSibling;
    // 切换显示/隐藏状态
    popover.togglePopover();
  });
});
</script>

优缺点：完全不需要ID，结构简洁，新增分组无需修改JS；但脱离了原生Popover API的popovertarget机制，需自行处理事件逻辑。

方案2：动态生成唯一ID（保留原生API特性） #

如果想继续使用原生Popover API的属性（比如popovertargetaction），可以通过JS自动给每个popover和按钮生成唯一ID，避免手动硬编码。

实现步骤 #

• 给所有分组容器加统一类（比如popover-group）
• 遍历容器，为每个popover和对应按钮生成唯一ID并绑定popovertarget属性

<!-- 无需手动编写ID的复用结构 -->
<div class="popover-group">
  <button>打开菜单</button>
  <div popover>
    <p>下拉菜单内容</p>
    <button>选项1</button>
    <button>选项2</button>
  </div>
</div>

<div class="popover-group">
  <button>打开菜单</button>
  <div popover>
    <p>下拉菜单内容</p>
    <button>选项1</button>
    <button>选项2</button>
  </div>
</div>

<script>
document.querySelectorAll('.popover-group').forEach((group, index) => {
  const uniqueId = `menu-${index}`;
  const btn = group.querySelector('button');
  const popover = group.querySelector('[popover]');
  
  popover.id = uniqueId;
  btn.setAttribute('popovertarget', uniqueId);
});
</script>

优缺点：保留原生Popover API的所有特性，无需自行编写事件逻辑；需要生成ID但全程自动完成，无需手动维护。

补充说明 #

• 两种方案都支持无限新增popover分组，无需修改核心代码
• 若需自定义显示/隐藏逻辑（如点击外部关闭），方案1可灵活扩展；方案2可依赖原生API的自动关闭特性

内容的提问来源于stack exchange，提问作者lilpigboy