悬停时，子菜单未按预期保留答案

【问题标题】：On hover the sub menu is not staying as expected悬停时，子菜单未按预期保留
【发布时间】：2017-12-09 06:15:14
【问题描述】：

在我的代码中，当我尝试悬停主菜单时，子菜单应该打开，我也可以单击子菜单的其他链接。我已经完成了几乎所有操作，但当我尝试悬停子菜单时除外不显示。

我将鼠标悬停在菜单上，我可以看到子菜单，但是当我尝试进入子菜单时它消失了

 $(document).ready(function(){

        $(".accounts").mouseenter(function() {
            $(".underdrop").slideDown();
        });
        $(".accounts").mouseleave(function() {
            $(".underdrop").slideUp();
        });

 }); 




.accounts{

display: inline-block;

position: relative;
}
.underdrop{
    width: 150px;
    position: absolute;
    background-color: #fff;
    margin-top: 20px;
    margin-left:250px;
    border: 1px solid #d7d7d7;
    padding-left: 0px;
    height:230px;
    z-index: 999999;
    -webkit-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
    display:none;

}

.underdrop::before{
    content: '';
    position: absolute;
    border: 15px solid #4b968a;
    border-bottom-color: transparent;
    border-right-color: transparent;
    margin-left: 55px;
    transform: rotate(45deg );
    margin-top: -15.5px;
    z-index: 9999
}

DEMO

【问题讨论】：

我在移动设备上，现在无法真正测试它。但我想原因是 mouseleave 功能。在这种情况下，您可能需要检查鼠标是否离开子菜单而不关闭主菜单。也可以考虑仅在悬停页面的其余部分时才关闭菜单。但这可能对性能不利。

标签： javascript jquery html css menu

【解决方案1】：

像这样更新您的document.ready 函数。我已经签入了 jsfiddle

    $(document).ready(function(){

        $(".accounts").mouseenter(function() {
            $(".underdrop").slideDown();
        });
        $(".underdrop").mouseleave(function() {
            $(".underdrop").slideUp();
        });

 });

检查更新的 jsfiddle here

【讨论】：

感谢您的解决方案，这是我一直在寻找的答案。请问我知道逻辑吗？
在您的 jsfiddle 演示中，您在离开主菜单时向上滑动子菜单，因此我删除了 $(".accounts").mouseleave(function()$(".underdrop").slideUp(); });我在子菜单 $(".underdrop").mouseleave(function() {$(".underdrop").slideUp(); });在我的 jsfiddle 中，所以子菜单将在离开主菜单后打开，并且仍然打开，并且将在离开子菜单时关闭..