单击新弹出窗口时如何隐藏页面上的弹出窗口？

Question

使用 bootstrap 3，我在我的页面上创建了多个弹出窗口，并通过单击它们来显示。在打开点击的新弹出窗口之前，如何隐藏所有当前打开的弹出窗口？目前当我点击 "Item 1" 它打开和关闭都很好，但是如果 "Item 1" 打开然后我点击 "Item 2"，现在两者都打开了。

示例代码：

Item 1:<a href="javascript:void(0)" data-toggle="popover" data-placement="top" title="Unavailable">Unavailable</a>
<br />
Item 2:<a href="javascript:void(0)" data-toggle="popover" data-placement="top" title="Unavailable">Unavailable</a>

$(function () {
  $('[data-toggle="popover"]').popover({
      html: true,
      content: '<removed html to keep it short>',
      title: 'Unavailable',
      trigger: 'click',
      animation: true
  })
})

Answer 1

根据 docs:

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

因此，将触发器更改为 focus 而不是 click。

单击新弹出窗口时如何隐藏页面上的弹出窗口？

How can I hide popovers on page when clicking a new one?

jquery

twitter-bootstrap

twitter-bootstrap-3