如何在Bootstrap Accordion头部添加点击不触发展开/折叠的按钮

问题原因 #

Bootstrap Accordion默认将折叠/展开的触发逻辑绑定在头部区域，你额外添加的Edit、Delete按钮点击时，点击事件会向上冒泡到绑定了折叠逻辑的父级元素，因此会误触发Accordion的折叠或展开动作。

解决方法 #

方法1：阻止按钮点击事件冒泡（全版本兼容） #

给你新增的两个按钮添加onclick="event.stopPropagation()"属性即可，该属性只会阻止事件向上传递，不会影响按钮本身的点击功能，修改后的代码片段如下：

<button type="button" class="btn btn-sm  btn-success" onclick="event.stopPropagation()">
    <em class="far fa-edit"></em>&nbsp;&nbsp;Edit
</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-sm btn-danger" onclick="event.stopPropagation()">
    <i class="far fa-trash-alt"></i>&nbsp;&nbsp;Delete
</button>

方法2：使用Bootstrap内置属性（适配Bootstrap 5.2及以上版本） #

如果你的项目使用Bootstrap 5.2及更高版本，可以直接给按钮加data-bs-stop-propagation="true"属性，无需手动编写JS逻辑：

<button type="button" class="btn btn-sm  btn-success" data-bs-stop-propagation="true">
    <em class="far fa-edit"></em>&nbsp;&nbsp;Edit
</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-sm btn-danger" data-bs-stop-propagation="true">
    <i class="far fa-trash-alt"></i>&nbsp;&nbsp;Delete
</button>

布局优化建议 #

你可以给accordion-header类添加d-flex align-items-center gap-3的Bootstrap工具类，调整头部元素的对齐和间距，替换手动添加的空格，布局会更规范适配。

内容的提问来源于stack exchange，提问作者Abrew Abraham Alex