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 submenu您还可以使用.css()使用jQuery动态设置元素上的简单CSS，请看一下documentation。

下拉菜单的mouseenter和mouseleave问题

1 个答案: