如何实现Materialize CSS Collapsible折叠菜单记忆上次展开状态

现有代码问题 #

• 初始化Collapsible时未定义elem变量，未正确获取折叠面板的DOM元素
• onOpenStart配置项直接执行了storeElem(n)，而非传入回调函数，且该回调的默认入参是当前操作的li DOM对象，不是索引值
• 调用open方法时未使用Collapsible实例对象，且localStorage读取的值为字符串类型，需转为数值才能匹配索引
• 未处理折叠项关闭时的存储同步逻辑，关闭折叠项后存储值不会更新

修正后代码 #

单开模式（手风琴，一次仅展开一个） #

HTML部分无需修改，JavaScript代码调整如下：

<script>
$(document).ready(function(){    
    // 获取折叠面板DOM元素
    const elem = document.querySelector('.collapsible');
    // 初始化Collapsible实例
    const collapsibleInstance = M.Collapsible.init(elem, {
      accordion: true, // 手风琴模式，一次仅展开一个
      // 展开开始时存储当前展开项索引
      onOpenStart: function(activeLi) {
        const openIndex = Array.from(elem.children).indexOf(activeLi);
        window.localStorage.setItem('activeCollapsibleIndex', openIndex);
      },
      // 关闭时清空存储，支持全收起状态记忆
      onCloseStart: function() {
        window.localStorage.removeItem('activeCollapsibleIndex');
      }
    });
    // 页面加载时读取上次存储的索引，恢复展开状态
    const savedIndex = window.localStorage.getItem('activeCollapsibleIndex');
    if (savedIndex !== null) {
      collapsibleInstance.open(Number(savedIndex));
    }
})
</script>

多开模式（可同时展开多个折叠项） #

如果需要支持同时打开多个折叠项，调整JavaScript逻辑为数组存储即可：

<script>
$(document).ready(function(){    
    const elem = document.querySelector('.collapsible');
    const collapsibleInstance = M.Collapsible.init(elem, {
      accordion: false, // 允许多开
      onOpenStart: function(activeLi) {
        const openIndex = Array.from(elem.children).indexOf(activeLi);
        // 读取已展开的索引列表，不存在则初始化为空数组
        const openIndexList = JSON.parse(window.localStorage.getItem('collapsibleOpenList') || '[]');
        // 避免重复添加相同索引
        if (!openIndexList.includes(openIndex)) {
          openIndexList.push(openIndex);
          window.localStorage.setItem('collapsibleOpenList', JSON.stringify(openIndexList));
        }
      },
      onCloseStart: function(closedLi) {
        const closeIndex = Array.from(elem.children).indexOf(closedLi);
        const openIndexList = JSON.parse(window.localStorage.getItem('collapsibleOpenList') || '[]');
        // 移除已关闭的索引
        const updatedList = openIndexList.filter(i => i !== closeIndex);
        window.localStorage.setItem('collapsibleOpenList', JSON.stringify(updatedList));
      }
    });
    // 恢复所有上次打开的折叠项
    const savedOpenList = JSON.parse(window.localStorage.getItem('collapsibleOpenList') || '[]');
    savedOpenList.forEach(index => {
      collapsibleInstance.open(index);
    });
})
</script>

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