修复localStorage保存菜单li展开状态时键为undefined的问题

问题根源 #

1. 父级<li>没有唯一标识，原代码中$('.left-menu > li').attr('id')返回undefined，无法作为localStorage的有效键
2. 关闭菜单时未同步更新localStorage状态
3. 缺少页面加载时从localStorage读取状态并恢复菜单展开的逻辑

修复步骤 #

1. 给父级菜单添加唯一ID #

修改HTML，为每个带has-child的<li>添加唯一id：

<div class="nav nav-list categories" id="left-side">
   <ul class="left-menu">
      <li class="has-child" id="menu-men">
         <a href="javascript:;">Men</a> 
         <div class="left-sub-menu">
            <!-- 子菜单内容 -->
         </div>
      </li>
      <li class="has-child" id="menu-women">
         <a href="javascript:;">Women</a> 
         <div class="left-sub-menu">
            <!-- 子菜单内容 -->
         </div>
      </li>
      <li class="has-child" id="menu-girls-wear">
         <a href="javascript:;">Girls Wear (1 - 12)</a> 
         <div class="left-sub-menu">
            <!-- 子菜单内容 -->
         </div>
      </li>
      <li class="has-child" id="menu-boys-wear">
         <a href="javascript:;">Boys Wear</a> 
         <div class="left-sub-menu">
            <!-- 子菜单内容 -->
         </div>
      </li>
   </ul>
</div>

2. 修改JavaScript逻辑，完善localStorage操作 #

// 页面加载时恢复菜单状态
$(document).ready(function() {
    $('.left-menu > li.has-child').each(function() {
        const menuId = $(this).attr('id');
        const status = localStorage.getItem(menuId);
        if (status === "Open") {
            const self = $(this);
            const subMenu = self.find(".left-sub-menu");
            const list = self.find(".list");
            self.addClass('opened');
            subMenu.addClass('open');
            let h = list.outerHeight(true);
            subMenu.height(h > 250 ? 250 : h);
        }
    });
});

// 菜单点击事件
$(document).on('click', '.left-menu > li.has-child', function() {
    let self = $(this);
    var subMenu = self.find(".left-sub-menu");
    if (subMenu.length === 0) {
        return;
    }
    var list = self.find(".list");
    const menuId = self.attr('id');

    if (subMenu.hasClass('open')) {
        // 关闭菜单并更新状态
        subMenu.removeClass('open');
        subMenu.height(0);
        self.removeClass('opened');
        localStorage.setItem(menuId, "Closed");
    } else {
        // 关闭其他所有菜单
        $('.left-menu > li').removeClass('opened');
        $('.left-sub-menu').removeClass('open').height(0);
        // 打开当前菜单并更新状态
        self.addClass('opened');
        subMenu.addClass('open');
        let h = list.outerHeight(true);
        subMenu.height(h > 250 ? 250 : h);
        localStorage.setItem(menuId, "Open");
    }
});

3. 关键修改点说明 #

• 唯一键值：通过给父菜单添加唯一id，确保localStorage的键可唯一识别对应菜单
• 状态同步：关闭菜单时将对应键的值设为"Closed"，打开时设为"Open"，保证状态一致
• 加载恢复：在页面初始化时遍历所有父菜单，读取localStorage中的状态并自动展开对应菜单
• 事件优化：将点击事件限定在带has-child的项上，减少不必要的事件触发

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