jQuery toggle实现三层超级菜单时三级菜单第二次点击无法关闭问题

1. 事件绑定错误：你错误地给同一个.submenu-first-element元素绑定了两个点击事件回调，原本打算绑定给.submenu-2-first-element、控制second-element显隐的事件错绑到了.submenu-first-element上，两个回调的hide和toggle操作互相冲突抵消，最终表现为菜单无法正常收起。
2. 切换逻辑缺陷：所有toggle执行前你都先隐藏了同层级全部菜单，这会强制把目标元素的状态重置为隐藏，后续执行toggle只会将其切换为显示状态，永远无法触发隐藏分支，自然无法实现点击收起的效果。
3. 缺少子菜单同步隐藏逻辑：父级菜单收起时没有同步隐藏对应的三级子菜单，不符合你要求的收起父级同时隐藏所有子级的交互逻辑。

首先修正错误的事件绑定，每个菜单元素仅绑定对应的控制逻辑；其次调整切换逻辑，切换时仅隐藏非目标的同层级菜单，保留目标元素原有状态让toggle可以正常生效；最后补充父级收起时同步隐藏子级菜单的逻辑。

修改后的jQuery代码如下：

// 第二列（二级菜单）逻辑
$('.first-link').on('click', function (e) {
  e.preventDefault();
  // 提前记录当前目标二级菜单的显示状态
  const targetIsVisible = $('.submenu-1').is(':visible');
  // 隐藏所有二级菜单
  $('.option').hide();
  // 同步隐藏所有三级菜单
  $('.hide-div').hide();
  // 原状态为隐藏则显示，原状态为显示则保持隐藏，实现点击切换
  if (!targetIsVisible) {
    $('.submenu-1').show();
  }
});

$('.second-link').on('click', function (e) {
  e.preventDefault();
  const targetIsVisible = $('.submenu-2').is(':visible');
  $('.option').hide();
  $('.hide-div').hide();
  if (!targetIsVisible) {
    $('.submenu-2').show();
  }
});

// 第三列（三级菜单）逻辑
$('.submenu-first-element').on('click', function (e) {
  e.preventDefault();
  // 隐藏除当前目标外的所有三级菜单
  $('.hide-div').not('.first-preview').hide();
  // 直接切换当前目标的显隐状态
  $('.first-preview').toggle();
});

// 修正选择器，绑定到submenu-2下的对应元素
$('.submenu-2-first-element').on('click', function (e) {
  e.preventDefault();
  $('.hide-div').not('.second-element').hide();
  $('.second-element').toggle();
});

$('.submenu-second-element').on('click', function (e) {
  e.preventDefault();
  $('.hide-div').not('.third-element').hide();
  $('.third-element').toggle();
});

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