关于Bootstrap Popover按钮图标切换功能的技术问询

这需求我之前做项目时刚好碰到过，利用Bootstrap Popover自带的事件就能轻松搞定，完全不用复杂的逻辑！

核心思路 #

Bootstrap Popover提供了show.bs.popover和hide.bs.popover两个关键事件，分别在弹出框显示前和隐藏前触发，我们只需要在这两个事件里切换按钮的图标状态就行。

方案一：切换图标元素显示状态（适合需要不同图标样式的场景） #

先准备HTML结构，把默认图标和关闭图标都放在按钮里，默认用Bootstrap的d-none类隐藏关闭图标：

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover标题" data-bs-content="这里是Popover的内容">
  <i class="fa-solid fa-info-circle default-icon"></i>
  <i class="fa-solid fa-times close-icon d-none"></i>
</button>

（这里用了Font Awesome图标，你可以换成自己项目里的图标类）

然后写JavaScript逻辑，监听Popover的两个事件来切换图标：

// 初始化Popover实例
const popoverBtn = document.querySelector('[data-bs-toggle="popover"]');
const popoverInstance = new bootstrap.Popover(popoverBtn);

// 显示Popover时切换为关闭图标
popoverBtn.addEventListener('show.bs.popover', function () {
  this.querySelector('.default-icon').classList.add('d-none');
  this.querySelector('.close-icon').classList.remove('d-none');
});

// 隐藏Popover时恢复默认图标
popoverBtn.addEventListener('hide.bs.popover', function () {
  this.querySelector('.default-icon').classList.remove('d-none');
  this.querySelector('.close-icon').classList.add('d-none');
});

方案二：直接切换图标类（更简洁，适合图标仅类名不同的场景） #

如果你的默认图标和关闭图标只是CSS类不同，不需要额外DOM结构，可以直接修改图标元素的类：

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover标题" data-bs-content="这里是Popover的内容">
  <i class="fa-solid fa-info-circle"></i>
</button>

对应的JavaScript：

const popoverBtn = document.querySelector('[data-bs-toggle="popover"]');
const popoverInstance = new bootstrap.Popover(popoverBtn);

popoverBtn.addEventListener('show.bs.popover', function () {
  const icon = this.querySelector('i');
  icon.classList.remove('fa-info-circle');
  icon.classList.add('fa-times');
});

popoverBtn.addEventListener('hide.bs.popover', function () {
  const icon = this.querySelector('i');
  icon.classList.remove('fa-times');
  icon.classList.add('fa-info-circle');
});

注意事项 #

• 如果页面上有多个Popover按钮，记得把选择器改成类名（比如.popover-btn），并通过循环为每个按钮初始化事件监听。
• 确保已经正确引入Bootstrap的JS、CSS，以及你使用的图标库（比如Font Awesome）。

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