mouseenter 和 mouseleave 下拉菜单问题答案

【问题标题】：mouseenter and mouseleave problems with dropdownmouseenter 和 mouseleave 下拉菜单问题
【发布时间】：2019-01-12 03:03:35
【问题描述】：

我需要制作下拉菜单。问题是 HTML 结构迫使我使用带有 fadeIN 和 fadeOut 选项的 jQuery 而不是 CSS。在主菜单中，我有博客类别和关于我之类的选项。问题是 somone 稍后添加了子菜单，我无法更改它（因为我无法更改 html）。我需要使子菜单仅在我将鼠标悬停在类别上时才显示，但是当我在类别 ofc 上使用 mouseenter 和 mouseleave 时，它会在我设法单击子菜单中的某物之前消失。当鼠标从类别移出但仍位于带有子菜单的 div 上时，如何制作条件（可能是一些如果？）以使子菜单留在现场？

subMenu: function () {
        //
        console.log('subMenu')  
        //
        $("#mainNav > ul > li:nth-child(2)").mouseenter(function(){
            $(".category-menu").fadeIn();

        })

        $("#mainNav > ul > li:nth-child(2)").mouseleave(function(){
            $(".category-menu").fadeOut();

        })
    },

这是我的代码，我知道它很烂，但我尝试了几种解决方案，但我无法弄清楚。有人可以帮我调整我的代码吗？

基本上我的问题是子菜单不是主导航的一部分，我被禁止在 html 中更改它。

【问题讨论】：

Unstable mouseenter/mouseleave submenu的可能重复

标签： jquery html drop-down-menu menu

【解决方案1】：

假设$(".category-menu") 是您的子菜单项，您可以使用此问题的答案：mouseenter mouseleave submenu 您也可以使用.css() 使用 jQuery 为元素动态设置简单的 CSS，看看 documentation。

【讨论】：