如何阻止Bootstrap折叠面板点击内部锚点时自动收起

问题根源 #

点击折叠面板里的链接时，点击事件会向上冒泡到面板的标题触发区（带data-toggle="collapse"的.card-header），触发Bootstrap自带的折叠逻辑，导致面板收起。另外你现有的JS代码还有几个逻辑错误：

• localStorage存和取的键名不一致，存的时候用了"#accordion"，取的时候找的是"accordion"，根本读不到值
• 选择器写法错误，$('#accordion #collapse('+activeAccordion+')')无法被jQuery识别，定位不到目标面板
• 刚把值存入localStorage就立刻删除，等于白存，页面刷新后无法恢复面板状态

修正后的JavaScript方案 #

// 仅处理面板标题的折叠触发逻辑
$('#accordion .card-header').click(function () {
  const collapsePanel = $(this).next('.collapse');
  const panelIndex = collapsePanel.index('.collapse');
  
  // 切换当前面板的激活状态
  collapsePanel.toggleClass('active');
  // 收起其他所有面板
  $('.collapse').not(collapsePanel).removeClass('active');
  
  // 保存当前激活面板的索引到localStorage
  localStorage.setItem('activeAccordionIndex', panelIndex);
});

// 处理内部链接点击，阻止事件冒泡
$('#accordion .collapse a').click(function (e) {
  // 阻止事件向上传递，避免触发面板的折叠逻辑
  e.stopPropagation();
});

// 页面加载时恢复上次展开的面板
$(document).ready(function() {
  const activeIndex = localStorage.getItem('activeAccordionIndex');
  if (activeIndex !== null) {
    // 定位到对应索引的面板并强制展开
    $('.collapse').eq(activeIndex).addClass('active').collapse('show');
  }
});

代码说明 #

1. 分离事件处理：把面板标题的折叠触发逻辑和内部链接的点击逻辑分开，避免互相干扰
2. 阻止事件冒泡：在内部链接的点击事件中调用e.stopPropagation()，切断事件向上传递的路径，从根源上避免面板被意外收起
3. 修正localStorage逻辑：
   • 使用统一的键名activeAccordionIndex存储激活面板的索引
   • 页面加载时通过eq(activeIndex)精准定位面板，调用collapse('show')确保Bootstrap折叠组件正确更新状态（仅添加active类可能无法触发组件的内部状态同步）
4. 简化选择器：用简洁的链式选择器替代多层嵌套的parent()调用，提升代码可读性和维护性

配合HTML的注意事项 #

确保你的折叠面板结构符合Bootstrap规范，data-parent="#accordion"属性正确设置，这样可以保留“展开当前面板时自动收起其他面板”的默认功能。

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