如何点击Bootstrap折叠面板按钮子元素时阻止面板折叠

要实现点击Accordion按钮内的图标时禁用面板的展开/折叠，点击按钮其他区域正常触发，你可以通过以下方式修正代码：

原代码的问题 #

1. JavaScript中event.preventDefault只是引用了方法，没有实际调用（缺少括号()）
2. 逐个元素绑定onclick事件冗余，可通过事件委托简化

修正方案 #

优化后的HTML

移除多余的onclick属性，给需要阻止折叠的图标容器统一添加.prevent-collapse类：

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panel_collapse_1" aria-expanded="true" aria-controls="panel_collapse_1">
        <div class="test2">
          <span id="shipment__trackingNumber">785XXXXXXXX</span>
          <span id="shipment__status">Out for delivery</span>
          <span id="shipment__view" class="prevent-collapse">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
              <path d="M19.504 11.4684C19.8791 11.9238 20.0666 12.1514 20.0666 12.498C20.0666 12.8447 19.8791 13.0723 19.504 13.5276C18.132 15.1934 15.106 18.2948 11.5934 18.2948C8.08085 18.2948 5.05474 15.1934 3.68276 13.5276C3.30774 13.0723 3.12024 12.8447 3.12024 12.498C3.12024 12.1514 3.30774 11.9238 3.68276 11.4684C5.05474 9.80269 8.08085 6.70129 11.5934 6.70129C15.106 6.70129 18.132 9.80269 19.504 11.4684Z" fill="#164B7D" fill-opacity="0.24"/>
              <path d="M11.5936 15.396C13.1943 15.396 14.4919 14.0983 14.4919 12.4976C14.4919 10.8969 13.1943 9.59924 11.5936 9.59924C9.99284 9.59924 8.69519 10.8969 8.69519 12.4976C8.69519 14.0983 9.99284 15.396 11.5936 15.396Z" fill="#164B7D"/>
            </svg>
          </span>
          <span id="shipment__edit" class="prevent-collapse">
            <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
              <path opacity="0.15" d="M3.02441 15.1221H6.0488L13.6098 7.56115L10.5854 4.53676L3.02441 12.0977V15.1221Z" fill="#164B7D"/>
              <path d="M9.07319 15.1221H15.5M13.6098 7.56115L15.8781 5.29285L12.8537 2.26846L10.5854 4.53676M13.6098 7.56115L6.0488 15.1221H3.02441V12.0977L10.5854 4.53676M13.6098 7.56115L10.5854 4.53676" stroke="#164B7D" stroke-width="1.13415" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
        </div>
      </div>
    </h2>
    <div id="panel_collapse_1" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
      </div>
    </div>
  </div>
</div>

修正后的JavaScript

使用事件委托监听按钮点击，判断点击目标是否在需要阻止的区域内，同时阻止默认行为和事件冒泡：

$(document).on('click', '.accordion-button', function(event) {
  // 检查点击目标是否属于.prevent-collapse元素
  if ($(event.target).closest('.prevent-collapse').length > 0) {
    event.preventDefault(); // 阻止默认折叠行为
    event.stopPropagation(); // 阻止事件冒泡到父元素
  }
});

代码说明 #

• 事件委托：通过$(document).on绑定事件，即使动态生成的Accordion元素也能生效
• closest('.prevent-collapse')：向上查找最近的.prevent-collapse容器，确保点击图标内部的SVG也能触发判断
• preventDefault() + stopPropagation()：双重阻止，确保Bootstrap的折叠逻辑不会被触发

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