如何精简jQuery列表菜单代码 实现刷新页面后保持菜单展开状态

可复用实现方案 #

先调整HTML结构（原结构不符合语义规范，子菜单ul需放在对应menu的li标签内，后续新增菜单无需修改JS逻辑，直接按结构追加即可）：

<ul class="menu-container">
  <li class="menu">
    <a href="#">Server</a>
    <ul>
      <li class="item">
        <span>
          <a href="#1">Start</a>
        </span>
      </li>
      <li class="item">
        <span>
          <a href="#2">Security</a>
        </span>
      </li>
    </ul>
  </li>
  <li class="menu">
    <a href="#">GIT</a>
    <ul>
      <li class="item">
        <span>
          <a href="#1">blub</a>
        </span>
      </li>
      <li class="item">
        <span>
          <a href="#2">wurst</a>
        </span>
      </li>
    </ul>
  </li>
  <!-- 后续新增菜单直接按上述格式添加即可 -->
</ul>

封装完成的可复用jQuery代码如下：

$(document).ready(function () {
  /**
   * 持久化菜单初始化方法，可复用
   * @param {string} menuSelector 菜单节点选择器
   * @param {string} itemSelector 子项节点选择器
   */
  function initPersistentMenu(menuSelector, itemSelector) {
    // 初始隐藏所有子项
    $(itemSelector).hide();

    // 页面加载时读取本地存储恢复展开状态
    const activeMenuIndex = localStorage.getItem('activeMenuIndex');
    if (activeMenuIndex !== null) {
      $(menuSelector).eq(Number(activeMenuIndex)).find(itemSelector).show();
    }

    // 绑定菜单点击事件
    $(menuSelector).click(function (e) {
      e.preventDefault();
      const currentIndex = $(this).index();
      // 收起所有已展开的子项
      $(itemSelector).hide();
      // 展开当前点击菜单的子项
      $(this).find(itemSelector).show();
      // 存储当前激活菜单的索引到本地存储
      localStorage.setItem('activeMenuIndex', currentIndex);
    });
  }

  // 传入对应选择器调用初始化即可，后续调整类名只需要改此处参数
  initPersistentMenu('.menu', '.item');
});

说明 #

• 封装的initPersistentMenu方法完全可复用，仅需传入对应选择器即可适配不同菜单结构
• 修复了原代码中选择器逻辑错误、本地存储值无法区分具体菜单的问题
• 页面刷新后会自动恢复之前展开的菜单状态

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