HTMLElement: togglePopover() 方法

基线 2024

新可用

自 2024 年 4 月起，此功能在最新的设备和浏览器版本上均有效。此功能可能无法在较旧的设备或浏览器中使用。

togglePopover() 是 HTMLElement 接口的方法，用于在隐藏状态和显示状态之间切换 popover 元素（即具有有效 popover 属性的元素）。

当在具有 popover 属性的元素上调用 togglePopover() 时

会触发 beforetoggle 事件。
popover 在隐藏状态和显示状态之间切换
1. 如果它最初处于显示状态，则会切换到隐藏状态。
2. 如果它最初处于隐藏状态，则会切换到显示状态。
会触发 toggle 事件。

语法

togglePopover(force)

参数

force

布尔值，使 togglePopover() 的行为类似于 showPopover() 或 hidePopover()，不同之处在于，如果 popover 已经处于目标状态，则不会抛出异常。

如果设置为 true，则如果 popover 最初处于隐藏状态，则会显示它。如果它最初处于显示状态，则不会发生任何操作。
如果设置为 false，则如果 popover 最初处于显示状态，则会隐藏它。如果它最初处于隐藏状态，则不会发生任何操作。

返回值

如果调用后弹出窗口处于打开状态，则为 true，否则为 false。

在较旧的浏览器版本中可能返回 undefined（请参阅浏览器兼容性）。

示例

请访问 Popover API 示例着陆页以访问 MDN popover 示例的完整集合。

这是一个稍微修改过的切换帮助 UI Popover 示例版本。该示例通过按键盘上的特定键（当示例窗口处于焦点状态时）来打开和关闭 popover。

示例的 HTML 代码如下所示。第一个元素定义了有关如何调用弹出窗口的说明，因为弹出窗口默认情况下是隐藏的。

html

<p id="instructions">
  Press "h" to toggle a help screen (select example window first).
</p>

然后，我们定义了一个 <div> 元素，它是弹出窗口。实际内容并不重要，但请注意，我们需要 popover 属性才能将 <div> 转换为 popover，以便默认情况下它处于隐藏状态（或者我们可以在 JavaScript 中设置此元素）。

html

<div id="mypopover" popover>
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
  </ul>
</div>

示例的 JavaScript 代码如下所示。首先，我们检查是否支持 popover，如果不支持，我们会隐藏 popover div，使其不会在线显示。

const instructions = document.getElementById("instructions");
const popover = document.getElementById("mypopover");

if (!HTMLElement.prototype.hasOwnProperty("popover")) {
  popover.innerText = "";
  instructions.innerText = "Popovers not supported";
}

如果支持 popover，我们会添加一个监听器，用于监听按下 h 键，并使用它来触发打开弹出窗口。我们还记录了调用后弹出窗口是打开还是关闭，但仅当返回 true 或 false 时才记录。

if (HTMLElement.prototype.hasOwnProperty("popover")) {
  document.addEventListener("keydown", (event) => {
    if (event.key === "h") {
      const popupOpened = popover.togglePopover();

      // Check if popover is opened or closed on supporting browsers
      if (popupOpened !== undefined) {
        instructions.innerText +=
          popupOpened === true ? `\nOpened` : `\nClosed`;
      }
    }
  });
}

您可以使用下面的实时示例进行测试。

规范

规范
HTML 标准 # dom-togglepopover

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅

popover HTML 全局属性
Popover API