为何event.stopPropagation会同时阻止Bootstrap Collapse功能？

这个问题我之前也碰到过！核心就是事件冒泡和Bootstrap折叠的触发逻辑撞车了，给你两个靠谱的解决办法：

方法一：在父元素点击事件里做判断（推荐） #

不用改太多代码，直接在父元素的drawPlanAdmin函数里加个判断——如果点击的目标是折叠图标（.spinner）或者它的子元素，就跳过后续逻辑。这样Bootstrap的折叠功能完全不受影响，父元素的逻辑也只会在点击非图标区域时触发。

先修改父元素的onclick，把事件对象传进去：

<li id="planAdminMenuItem" onclick="drawPlanAdmin(event)">
  <span class="spinner" data-toggle="collapse" data-target="#collapseExample">折叠图标</span>
  <!-- 其他列表内容 -->
</li>

然后更新drawPlanAdmin函数：

function drawPlanAdmin(event) {
  // 检查点击的目标是不是.spinner或者它的子元素
  if (event.target.closest('.spinner')) {
    return; // 直接返回，不执行后续的drawPlanAdmin逻辑
  }
  
  // 这里放你原来的drawPlanAdmin业务代码
  console.log('执行计划管理页面渲染逻辑');
}

方法二：给折叠图标单独绑定事件，阻止冒泡+手动触发折叠 #

如果不想修改父元素的函数，可以给.spinner单独加点击事件：先阻止事件冒泡到父元素，再手动调用Bootstrap的折叠方法（之前折叠失效就是因为stopPropagation阻止了事件冒泡到document，而Bootstrap的折叠默认是靠document上的事件委托触发的）。

// 用jQuery绑定事件（原生JS写法也类似）
$('.spinner').on('click', function(event) {
  // 阻止事件冒泡，父元素的onclick不会触发
  event.stopPropagation();
  // 手动触发折叠切换
  $('#collapseExample').collapse('toggle');
});

注意：如果你的.spinner已经加了data-toggle="collapse"属性，记得把它删掉，不然会触发两次折叠切换。

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