升级jQuery后弹出式子菜单失效问题求助

看起来你遇到的问题是因为jQuery版本升级后，旧的事件绑定逻辑不再适配新版本的API了。具体来说有两个核心问题：

1. .bind("hover")的兼容性问题：jQuery 1.7之后，官方推荐使用.on()作为统一的事件绑定方法，而hover并非原生DOM事件，它是jQuery早期封装的合成事件（对应mouseenter+mouseleave的组合）。新版本中直接用.bind("hover")会无法正确触发事件逻辑。
2. 配置参数传递无效：你定义的hoverAttributes里的speed和delay，通过.bind()的第二个参数传递，但这种方式并不能让jQuery识别并应用这些配置来控制动画速度和延迟。

下面是完全适配jQuery 1.7+版本的修复代码：

$(document).ready(function() {
  const hoverDelay = 100; // 对应你原来的delay参数
  const animationSpeed = 10; // 对应你原来的speed参数

  // 绑定鼠标进入事件（hover的触发阶段）
  $("#nav-home").on("mouseenter", function() {
    $("#subnav").children().hide(animationSpeed);
    $("#sub-home").delay(hoverDelay).show(animationSpeed);
  });

  $("#nav-library").on("mouseenter", function() {
    $("#subnav").children().hide(animationSpeed);
    $("#sub-library").delay(hoverDelay).show(animationSpeed);
  });

  // 可选：鼠标离开导航项时自动隐藏子菜单，优化交互体验
  $("#nav-home, #nav-library").on("mouseleave", function() {
    $("#subnav").children().hide(animationSpeed);
  });
});

关键改动说明： #

• 用.on()替代.bind()：.on()是jQuery 1.7+官方推荐的事件绑定方式，兼容性更强，功能更灵活。
• 明确绑定mouseenter事件：直接绑定原生鼠标进入事件，避免hover合成事件的兼容性歧义。
• 正确应用动画参数：通过.hide(animationSpeed)、.show(animationSpeed)控制动画速度，用.delay(hoverDelay)实现延迟效果，替代原来无效的参数传递逻辑。

如果想让代码更易于维护，可以把重复逻辑封装成函数：

$(document).ready(function() {
  const hoverDelay = 100;
  const animationSpeed = 10;

  // 封装子菜单显示逻辑
  function showTargetSubmenu(targetSelector) {
    $("#subnav").children().hide(animationSpeed);
    $(targetSelector).delay(hoverDelay).show(animationSpeed);
  }

  $("#nav-home").on("mouseenter", () => showTargetSubmenu("#sub-home"));
  $("#nav-library").on("mouseenter", () => showTargetSubmenu("#sub-library"));

  // 鼠标离开时隐藏子菜单
  $("#nav-home, #nav-library").on("mouseleave", () => {
    $("#subnav").children().hide(animationSpeed);
  });
});

后续新增导航项时，只需调用showTargetSubmenu函数即可，代码复用性更强。

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