jquery - 无法将鼠标悬停在 jquery 切换的子菜单上

Question

我用 jquery 构建了一个菜单，顶部菜单上的 4 个类别按钮触发下面的 4 个子菜单。它工作正常，当我将鼠标悬停在另一个按钮上时，子菜单会出现并发生变化，但我无法将鼠标悬停在子菜单上，当我“离开”触发按钮时它会消失。

JSFiddle Example (对于困惑的代码，我很抱歉，我无法在 Fiddle 中重现整个组合，我复制粘贴了重要部分，并且网站上的问题与此示例中看到的相同)

这是子菜单调用的 jquery:('active' 和 'rotated' 用于更改图标/旋转触发按钮上的文本，这些是三 Angular 形，我对它们做了一些 jquery 幻想，我希望它仍然可以理解)

 $('.leisuremenu').hover(function () {
    $('.leisure_menu').toggleClass('show_menu');
    $('.luxury_menu').toggleClass('show_menu');
    $('.select-luxury').toggleClass('active');
    $('.select-corporate').toggleClass('rotated');
    $('.select-luxury').toggleClass('rotated');
});
$('.corporatemenu').hover(function () {
    $('.corporate_menu').toggleClass('show_menu');
    $('.luxury_menu').toggleClass('show_menu');
    $('.select-luxury').toggleClass('active');
    $('.select-luxury').toggleClass('rotated');
});
$('.vipmenu').hover(function () {
    $('.vip_menu').toggleClass('show_menu');
    $('.luxury_menu').toggleClass('show_menu');
    $('.select-luxury').toggleClass('active');
    $('.select-vip').toggleClass('rotated');
    $('.select-vip').toggleClass('active');
});

在此示例中，第 4 个触发按钮处于事件状态，另外 3 个触发其他 3 个子菜单。

当我将鼠标悬停在子菜单上时，我如何修改它以实现子菜单保持原位并且当我离开子菜单或悬停在另一个触发按钮上时它应该消失？

(注意:触发器三 Angular 形和子菜单之间没有空格，所以我认为这不是 CSS 问题)

我试过添加这个但是没用:

        $('.vip_menu').hover(function () {
            $('.vip_menu').toggleClass('show_menu');
        });
        $('.corporate_menu').hover(function () {
            $('.corporate_menu').toggleClass('show_menu');
        });
        $('.leisure_menu').hover(function () {
            $('.leisure_menu').toggleClass('show_menu');
        });

如果我需要澄清更多细节/代码，请告诉我。

如有任何帮助，我们将不胜感激。

Answer 1

hover() jQuery 的函数允许您提供一个或两个函数。如果同时提供，第一个在 mouseenter 上执行，第二个在 mouseleave 上执行。如果您只提供一个，则在两个事件上都会调用该函数，这就是它再次切换类的原因。因为您只希望在您输入时发生这种情况，您可以将 hover(...) 更改为 mouseenter(...)。但是，您可以做一些清理，让一个函数处理所有事件，而不是每个菜单都有一个单独的函数。

我稍微更改了您的标记，以便为每个菜单添加一个 menu 类。这将使我们稍后在代码中更容易找到它们。然后我使用正则表达式找出菜单名称。你可以通过使用类似 data- 属性的东西来让自己更容易一些，而不是必须处理正则表达式(然后你可以说像 $(this).data( “菜单名称”) 例如)。

而不是使用 toggleClass 你会想隐藏所有的，然后显示你感兴趣的。这样你就不需要知道哪些已经隐藏或显示.

下面是有趣的代码，但我已将其全部包含在 an updated fiddle 中

$(".link").mouseenter(function() {
  var menuName = /\bselect-(\w+?)\b/.exec(this.className)[1];

  $(".link").removeClass("active rotated");
  $(this).addClass("active rotated");

  $(".menu").removeClass("show_menu");
  $("." + menuName + "_menu").addClass("show_menu");
});