如何刷新或跳转页面后保持侧边栏Accordion菜单展开状态

要实现刷新或页面跳转后保留Accordion的展开状态，核心思路是用localStorage持久化记录展开的菜单状态，页面加载时读取并恢复状态。以下是适配你现有代码的具体实现：

步骤1：给Accordion添加唯一标识 #

先修改HTML，给每个accordion按钮添加唯一id，方便后续精准记录状态：

<div class='sidenav'>
  <button class='accordion' id="accordion-fav"><i class='fa fa-star' aria-hidden='true'></i>&nbsp; FAV</button>
  <button class='accordion' id="accordion-sales"><i class='fa fa-th-large' aria-hidden='true'></i>&nbsp; SALES</button>
  <div class='panel'>
      <a href='item1.php'>&emsp;ITEM 1</a>
      <a href='item2.php'>&emsp;ITEM 2</a>
  </div>
</div>

步骤2：修改JavaScript实现状态持久化 #

更新你的JS代码，添加状态存储和恢复逻辑：

var acc = document.getElementsByClassName("accordion");
var expandedKey = "expandedAccordions";

// 页面加载时恢复展开状态
function restoreExpandedState() {
  var expandedIds = JSON.parse(localStorage.getItem(expandedKey)) || [];
  for (var i = 0; i < acc.length; i++) {
    var accordion = acc[i];
    if (expandedIds.includes(accordion.id)) {
      accordion.classList.add("active");
      var panel = accordion.nextElementSibling;
      if (panel && panel.classList.contains("panel")) {
        panel.style.maxHeight = panel.scrollHeight + "px";
        var parent = accordion.parentElement;
        parent.style.maxHeight = parseInt(parent.style.maxHeight || 0) + panel.scrollHeight + "px";
      }
    }
  }
}

// 点击时更新存储的状态
for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var parent = this.parentElement;
    var panel = this.nextElementSibling;
    
    // 保留原有样式切换逻辑
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
      parent.style.maxHeight = parseInt(parent.style.maxHeight) - panel.scrollHeight + "px";
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      parent.style.maxHeight = parseInt(parent.style.maxHeight || 0) + panel.scrollHeight + "px";
    } 

    // 更新localStorage中的状态
    var expandedIds = JSON.parse(localStorage.getItem(expandedKey)) || [];
    var idIndex = expandedIds.indexOf(this.id);
    if (this.classList.contains("active")) {
      if (idIndex === -1) expandedIds.push(this.id);
    } else {
      if (idIndex !== -1) expandedIds.splice(idIndex, 1);
    }
    localStorage.setItem(expandedKey, JSON.stringify(expandedIds));
  });
}

// 页面加载完成后执行恢复逻辑
document.addEventListener("DOMContentLoaded", restoreExpandedState);

代码说明 #

• localStorage持久化：用expandedAccordions作为键名，存储展开状态的accordion id数组，实现页面刷新/跳转后的状态保留。
• 状态恢复：页面加载完成后，读取存储的id数组，给对应accordion添加active类，并还原panel的maxHeight样式。
• 实时同步：每次点击accordion切换状态时，同步更新localStorage中的记录，确保状态与当前DOM一致。

注意事项 #

• 若涉及多标签页场景，可监听storage事件实现标签页间的状态同步。
• 需要清除状态时，执行localStorage.removeItem("expandedAccordions")即可。

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