单击标题上的按钮时防止引导手风琴打开答案

【问题标题】：Prevent bootstrap accordion from openning when clicking on a button on header单击标题上的按钮时防止引导手风琴打开
【发布时间】：2021-05-01 14:50:02
【问题描述】：

我有两个操作按钮，它们位于手风琴的头部，如下所示：

当我单击其中一个按钮时，它会切换手风琴的状态，我尝试了 e.preventDefault() 和 e.stopImmediatePropagation() 没有结果

这是 jsfiddle：

https://jsfiddle.net/bxzhqsad/3/

请记住，我使用的是 Bootstrap 5。

【问题讨论】：

标签： javascript html css twitter-bootstrap bootstrap-5

【解决方案1】：

.accordion 按钮内的嵌套元素不允许捕获内部元素事件。实现此功能的一种方法是将内部按钮与 .accordion-button 分开，然后通过绝对定位实现视觉上相似的外观：

<h2 class="accordion-header" id="flush-heading-1">
    <div class="d-flex">
      <button type="button" class="accordion-button collapsed text-start" data-bs-toggle="collapse" data-bs-target="#item_1" aria-expanded="true" aria-controls="#item_1">
        <h5 class="content_title fw-bold w-100 text-left">Title 1</h5>
      </button>
      <div class="d-flex align-items-start position-fixed" style="right:100px; z-index:1000;">
          <span class="fa fa-pencil-alt cercle-icons edit-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
          <span class="far fa-trash-alt cercle-icons delete-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
        </div>
    </div>
</h2>

请看the modified fiddle

【讨论】：