如何刷新页面后保持Bootstrap折叠面板处于关闭状态？

一、默认全部折叠（基础修复） #

问题根源是你的第一个折叠项被设置为初始展开状态，代码里有两个关键设置导致了这个现象：

• 按钮没有collapsed类，且aria-expanded="true"
• 折叠内容容器带有show类

只需要修改第一个折叠项的两处代码：

1. 修改折叠按钮 #

原代码：

<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapse_üretim" aria-expanded="true" aria-controls="collapse_üretim">

修改后：

<button class="accordion-button collapsed d-block text-center" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapse_üretim" aria-expanded="false" aria-controls="collapse_üretim">

2. 修改折叠内容容器 #

原代码：

<div id="collapse_üretim" class="accordion-collapse collapse show"
     aria-labelledby="üretim_kategorisi_header" data-bs-parent="#proje_kategori_kutusu">

修改后：

<div id="collapse_üretim" class="accordion-collapse collapse"
     aria-labelledby="üretim_kategorisi_header" data-bs-parent="#proje_kategori_kutusu">

修改完成后，刷新页面所有折叠项都会默认关闭，不会自动展开第一个。

二、保存用户展开状态（进阶优化） #

如果希望刷新页面后保留用户之前打开的折叠项，可以用JavaScript结合localStorage实现状态记忆：

在页面的Bootstrap JS脚本之后添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你的折叠面板父容器ID
  const accordionContainer = document.getElementById('proje_kategori_kutusu');
  const savedItemId = localStorage.getItem('activeAccordionItem');

  // 页面加载时恢复之前的展开状态
  if (savedItemId) {
    const targetCollapse = document.getElementById(savedItemId);
    new bootstrap.Collapse(targetCollapse, { toggle: true });
  }

  // 监听展开事件，保存当前展开项的ID到本地存储
  accordionContainer.addEventListener('show.bs.collapse', function(e) {
    localStorage.setItem('activeAccordionItem', e.target.id);
  });

  // 监听关闭事件，若全部折叠则清除存储的状态
  accordionContainer.addEventListener('hide.bs.collapse', function(e) {
    const activeItems = accordionContainer.querySelectorAll('.collapse.show');
    if (activeItems.length === 1 && activeItems[0].id === e.target.id) {
      localStorage.removeItem('activeAccordionItem');
    }
  });
});

这段代码会在用户展开某个折叠项时记录其ID，刷新页面时自动展开对应的项；如果用户关闭所有折叠项，会清除存储的状态，下次刷新时保持全部关闭。

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