下拉菜单的mouseenter和mouseleave问题

Question

我需要制作下拉菜单。 问题是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();

        })
    },

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

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

Answer 1

假设$(".category-menu")是您的子菜单项，则可以使用此问题的答案： mouseenter mouseleave子菜单，您还可以使用.css()通过jQuery动态设置元素上的简单CSS，请参阅文档 。