提问人：Jay 提问时间：10/21/2023 最后编辑：Jay 更新时间：10/21/2023 访问量：56
如何使用 Bootstap 5 手动隐藏弹出框？
How to manually hide a popover with Bootstap 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
答：
0赞
andreivictor
10/21/2023
#1
在 Bootstrap 5 中，您可以使用以下方法隐藏弹出框：hide
const popoverInstance = new bootstrap.Popover(triggerElement, options);
// manually hide
popoverInstance.hide()
$().popover('hide')用于 Bootstrap v3 和 4。
在您的代码中，是一个弹出框实例，因此您应该替换为 .itemitem.popover('hide');item.hide();
document.getElementById('hideAllPopovers').addEventListener('click', () => {
items.forEach((item) => {
item.hide();
});
});
Stackblitz 演示：https://stackblitz.com/edit/stackblitz-starters-chdxor?file=src%2Findex.js
来自 Bootstrap 5 文档，方法：hide
隐藏元素的弹出框。在弹出框实际隐藏之前（即在 hidden.bs.popover 事件发生之前）返回给调用方。这被视为弹出框的“手动”触发。
评论
0赞
Jay
10/21/2023
工作！奇怪的是，引导程序文档显示没有.popover('hide').hide()
0赞
andreivictor
10/21/2023
在 Bootstrap 5 中，如果您使用 jquery，本来可以工作;请参阅：getbootstrap.com/docs/5.3/getting-started/javascript/...。$elemTrigger.popover(hide)
评论