如何在Bootstrap Accordion头部添加链接且不破坏折叠功能？

问题根源：Bootstrap Accordion的展开/收起逻辑绑定在头部按钮（.accordion-button）上，当按钮内部插入<a>标签时，点击链接的事件会向上冒泡触发按钮的折叠逻辑，同时点击按钮其他区域可能因结构或事件冲突导致折叠失效。

解决步骤 #

1. 正确构建HTML结构
   将链接嵌套在.accordion-button内部，通过Bootstrap的间距类区分折叠触发区域和链接区域：

   <div class="accordion" id="accordionExample">
     <div class="accordion-item">
       <h2 class="accordion-header" id="headingOne">
         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           折叠项标题
           <a href="/目标页面" class="ms-auto">跳转链接</a>
         </button>
       </h2>
       <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
         <div class="accordion-body">
           折叠内容区域
         </div>
       </div>
     </div>
   </div>
   

2. 阻止链接事件冒泡
   添加JavaScript代码，让点击链接时仅触发跳转，不触发按钮的折叠逻辑：

   document.querySelectorAll('.accordion-button a').forEach(link => {
     link.addEventListener('click', function(e) {
       e.stopPropagation();
     });
   });
   

说明 #

• e.stopPropagation()会阻止点击事件向上传递到父元素（.accordion-button），因此点击链接时只会执行跳转，不会触发折叠；点击按钮其他区域时，事件正常传递，保持折叠功能。
• 若使用Bootstrap 4，只需将data-bs-toggle改为data-toggle、data-bs-target改为data-target，JavaScript逻辑保持不变。

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