Bootstrap5手风琴折叠项刷新后保留状态的实现问题

你的原有代码存在三个核心问题导致无法生效：

• 调用的$.localStorage属于jQuery第三方插件能力，未引入对应插件时会直接报错，可直接替换为浏览器原生localStorage接口实现同等能力
• 脚本执行时机早于DOM渲染完成，此时无法选中页面中的.collapse元素，事件绑定、状态恢复逻辑全部失效
• 未同步更新手风琴触发按钮的aria-expanded属性，会出现面板状态和按钮样式不匹配的问题

修正后代码（兼容jQuery环境） #

将原有脚本替换为以下内容即可：

<script>
// 等待DOM完全加载、依赖就绪后执行逻辑
$(function () {
  // 折叠项隐藏时更新存储
  $('.collapse').on('hidden.bs.collapse', function () {
    localStorage.removeItem('open_' + this.id);
    // 同步更新按钮状态
    const targetItemClass = Array.from(this.classList).find(c => c.startsWith('item-'))
    const targetBtn = document.querySelector(`button[data-bs-target="#${this.id}"], button[data-bs-target$=".${targetItemClass}"]`);
    targetBtn && targetBtn.setAttribute('aria-expanded', 'false');
  });

  // 折叠项展开时更新存储
  $('.collapse').on('shown.bs.collapse', function () {
    localStorage.setItem('open_' + this.id, 'true');
    // 同步更新按钮状态
    const targetItemClass = Array.from(this.classList).find(c => c.startsWith('item-'))
    const targetBtn = document.querySelector(`button[data-bs-target="#${this.id}"], button[data-bs-target$=".${targetItemClass}"]`);
    targetBtn && targetBtn.setAttribute('aria-expanded', 'true');
  });

  // 页面加载时恢复历史状态
  $('.collapse').each(function () {
    const savedOpen = localStorage.getItem('open_' + this.id) === 'true';
    if (savedOpen) {
      $(this).collapse('show');
    } else {
      // 覆盖HTML默认的show类，和存储状态保持一致
      $(this).removeClass('show');
      const targetItemClass = Array.from(this.classList).find(c => c.startsWith('item-'))
      const targetBtn = document.querySelector(`button[data-bs-target="#${this.id}"], button[data-bs-target$=".${targetItemClass}"]`);
      targetBtn && targetBtn.setAttribute('aria-expanded', 'false');
    }
  });
});
</script>

额外优化建议 #

• 你的HTML中存在重复idcol-3、纯数字id1/2/3/4，不符合HTML规范，建议修改为语义化字符串id，可避免出现未知选择器异常
• 脚本需放在jQuery、Bootstrap 5 JS文件引入之后加载，避免依赖缺失报错

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