Bootstrap 5 如何手动隐藏一个弹出窗口

问题描述

我试图创建多个Bootstrap弹出窗口实例，并实现点击关闭全部的功能。

以下是我的操作步骤：

document.addEventListener('DOMContentLoaded', function () {

    var items = [];

    document.getElementById('addPopperButton', function () {
        var btn = document.createElement('button');
        btn.setAttribute('type', 'button');
        btn.innerText = 'Toggle poppver';

        var item = new bootstrap.Popover(btn, {
            trigger: 'hover click',
            title: 'lorem text',
            content: 'lorem text'
        });

        items.push(item);

        document.body.appendChild(btn);
    });

    document.getElementById('hideAllPopovers', function () {
        items.forEach(item => {
            item.popover('hide');
        });
    });

});

然而，这始终给我以下错误

未捕获的TypeError: item.popover不是一个函数

当点击hideAllPopovers时，我如何手动隐藏所有的popover实例？

解决方案

在 Bootstrap 5 中，你可以使用hide方法隐藏一个popover：

const popoverInstance = new bootstrap.Popover(triggerElement, options);

// manually hide
popoverInstance.hide()

$().popover('hide') 在 Bootstrap v3 和 4 中使用。

在你的代码中， item 是一个popover实例，所以你应该将 item.popover('hide'); 替换为 item.hide(); 。

document.getElementById('hideAllPopovers').addEventListener('click', () => {
  items.forEach((item) => {
    item.hide();
  });
});

隐藏元素的弹出框。在弹出框实际隐藏之前（即在hidden.bs.popover事件发生之前），返回给调用者。这被视为“手动”触发弹出框。