Question

所以我在jQuery中创建了一个非常简单的简单下拉菜单。当您将鼠标悬停在菜单按钮上时，子菜单会正确显示，但如果您尝试将鼠标移动到子菜单中，它会迅速消失。

如果用户将鼠标从开始图标移开而不是进入菜单，那么如何保持该子菜单打开但同时将其关闭？

    var moreCatsHovered = false;

    $(".moreCatsRight").mouseenter(function () {// show pohelp 
            $(".moreCatsRightMenu").fadeIn(100);
        });

    $(".moreCatsRightMenu").mouseenter(function () {// show pohelp 
            moreCatsHovered = true;
        });

     $(".moreCatsRightMenu").mouseleave(function(){ // hide pohelp on mouse out from pohelp

           $(".moreCatsRightMenu").fadeOut(100);
           moreCatsHovered = false;
    });


     $(".moreCatsRight").mouseleave(function(){ // hide pohelp on mouse out from pohelp
            if (moreCatsHovered == false)
                {
                    $(".moreCatsRightMenu").fadeOut(100);
                }
    });

这是我的小提琴：http://jsfiddle.net/c3qz0eva/

*编辑：遗憾的是我无法改变HTML结构*

Answer 1

 $(".moreCatsRight").mouseleave(function(){ // hide pohelp on mouse out from pohelp
                if (moreCatsHovered == true)
                    {
                        $(".moreCatsRightMenu").fadeOut(100);
                    }
        });

你的逻辑错了。注意我在if语句上做的更改。我认为这是你要做的事情，除非我误解了这个问题。

Answer 2

试试这个

 $('.moreCatsRight').on('mouseenter',function(){
      $('.moreCatsRightMenu').fadeIn(300);
    }).on('mouseout',function(event){
        var relatedTarget = $(event.relatedTarget);

        if(typeof relatedTarget != "undefined"){

            if(relatedTarget.hasClass('moreCatsRightMenu')){
                return false;
            }
        }
        $('.moreCatsRightMenu').fadeOut(300);
    });

    $('.moreCatsRightMenu').on('mouseout',function(event){
     var relatedTarget = $(event.relatedTarget);
    if(typeof relatedTarget != "undefined"){        
        if(relatedTarget.hasClass('moreCatsRight')){
            return false;
        }
    }
    $(this).fadeOut(300);
});

当您将鼠标悬停在下拉列表上时，悬停时jQuery dropdown div消失

2 个答案: