Question

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

JSFiddle Example（对于凌乱的代码感到抱歉，我无法在Fiddle中重现整个构图，我复制粘贴了重要的部分，并且网站上的问题与此示例中的相同）

这是子菜单调用的jquery：（'主动'和'旋转'用于改变图标/旋转触发按钮上的文字，这些是三角形，我对它们做了一些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个子菜单。

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

（注意：触发器三角形和子菜单之间没有空格，所以我认为这不是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');
        });

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

任何帮助都会得到满足。

不能将鼠标悬停在jquery切换的子菜单上

0 个答案: