Bootstrap 5折叠面板：点击头部弹出框触发元素时阻止面板切换

嘿，我明白你遇到的麻烦了——点击那个带Popover的图标时，弹出框正常显示的同时，折叠面板也跟着展开/收起，这确实挺影响体验的。核心问题其实是事件冒泡：图标嵌套在折叠按钮里面，点击图标时，事件会向上传递到父级按钮，触发了折叠的切换逻辑。

虽然你已经尝试用e.stopPropagation()阻止冒泡，但可能因为混用了jQuery和Bootstrap 5原生组件，导致效果没达到预期。下面给你两种可行的解决方案，你可以根据自己的技术栈选择：

方案一：使用Bootstrap 5原生JS（推荐，Bootstrap 5官方更推崇这种方式） #

先调整HTML，把Popover的属性换成Bootstrap 5原生的格式（注意前缀是data-bs-*）：

<div class="accordion-item mb-3 border shadow-sm">
  <h2 class="accordion-header" id="panelsStayOpen-headingOne">
    <button class="d-inline-block accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
      Heading
      <i class="fa fa-info-circle ms-3 popover-handler" 
         data-bs-toggle="popover"
         data-bs-trigger="click" 
         data-bs-html="true" 
         data-bs-title="Title of POPOVER <i class='float-end btn-popover btn-close'></i>" 
         data-bs-content="some text in popover<br /> some more text in popover<br /> even more text in popover<br /> last line of text in popover">
      </i>
    </button>
  </h2>
  <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
    <div class="accordion-body p-0 px-2">
      accordion content<br>
      accordion content<br>
      accordion content<br>
      accordion content<br>
      accordion content<br>
    </div><!--.accordion-body-->
  </div>
</div>

再用原生JS初始化Popover并绑定阻止冒泡的事件：

// 初始化所有Popover
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

// 给图标绑定点击事件，阻止事件冒泡到父级按钮
document.querySelectorAll('.popover-handler').forEach(el => {
  el.addEventListener('click', function(e) {
    e.stopPropagation();
    // 可选：点击其他图标时关闭当前Popover，避免多个弹出框同时显示
    popoverList.forEach(popover => {
      if (popover._element !== this) {
        popover.hide();
      }
    });
  });
});

// 处理Popover内部的关闭按钮
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('btn-close')) {
    const popoverEl = e.target.closest('.popover').previousElementSibling;
    const popover = bootstrap.Popover.getInstance(popoverEl);
    popover.hide();
  }
});

方案二：坚持使用jQuery #

如果你的项目还依赖jQuery，也可以调整代码确保事件绑定正确：

<div class="accordion-item mb-3 border shadow-sm">
  <h2 class="accordion-header" id="panelsStayOpen-headingOne">
    <button class="d-inline-block accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
      Heading
      <i class="fa fa-info-circle ms-3 popover-handler" data-bs-trigger="click" data-bs-html="true" data-bs-title="Title of POPOVER <i class='float-end btn-popover btn-close'></i>" data-bs-content="some text in popover<br /> some more text in popover<br /> even more text in popover<br /> last line of text in popover">
      </i>
    </button>
  </h2>
  <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
    <div class="accordion-body p-0 px-2" >
      accordion content<br>
      accordion content<br>
      accordion content<br>
      accordion content<br>
      accordion content<br>
    </div><!--.accordion-body-->
  </div>
</div>

对应的jQuery代码：

$(function(){
  // 初始化Popover
  $('.popover-handler').popover({
    html: true,
    trigger: 'click'
  });
  
  // 阻止点击图标时事件冒泡到父级按钮
  $('.popover-handler').on('click', function (e) {
    e.stopPropagation();
    // 关闭其他Popover
    $('.popover-handler').not(this).popover('hide');
  });
  
  // 点击关闭按钮关闭当前Popover
  $('body').on('click', '.btn-close', function() {
    $(this).closest('.popover').prev('.popover-handler').popover('hide');
  });
});

核心原理说明 #

不管用哪种方案，关键都是通过e.stopPropagation()阻止点击事件从图标元素向上传递到父级的折叠按钮，这样点击图标时就只会触发Popover的显示，而不会触发折叠面板的切换啦。

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