如何替换已废弃的jQuery .context属性 修复多级菜单开关功能

故障根因 #

失效核心原因是代码使用了jQuery 3.0+版本已完全移除的context废弃属性，且原有逻辑冗余绕路，可直接简化实现多级菜单开合需求。

修复后JS代码 #

$(document).ready(function() {
  $('i.idi').click(function(e) {
    e.stopPropagation();
    // 直接定位当前点击箭头对应的子菜单
    const currentSubmenu = $(this).next('ul.sub-menu')[0];
    if (!currentSubmenu) return;

    // 关闭所有非当前的已展开菜单
    document.querySelectorAll('ul.sub-menu').forEach(menu => {
      if (menu !== currentSubmenu && menu.classList.contains('block')) {
        menu.classList.remove('block');
        menu.classList.add('hidden');
      }
    });

    // 切换当前子菜单状态
    if (currentSubmenu.classList.contains('hidden')) {
      currentSubmenu.classList.remove('hidden');
      currentSubmenu.classList.add('block');
    } else {
      currentSubmenu.classList.remove('block');
      currentSubmenu.classList.add('hidden');
    }
  });
});

改动说明 #

• 完全移除所有调用废弃context属性的冗余代码，通过当前点击元素的相邻节点直接定位对应子菜单，逻辑更简洁
• 优化遍历逻辑，删除重复无效的循环操作
• 天然支持多级菜单：只要结构中i.idi元素后紧跟对应.sub-menu节点，任意层级的子菜单都可正常开合
• 原有HTML、CSS代码无需任何调整，直接替换JS部分即可正常运行

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