Question

无法想到一个更合适的标题，欢迎你改变它。

我有一个固定的左栏用于导航。当用户将鼠标悬停在此列中的某个导航项上时，我想在列的右侧显示一个子菜单。我的问题是，当用户将光标移动到新的子菜单元素时，它会消失。

这是我目前所处的地方，但不确定解决此问题的最佳方法。

如果将鼠标悬停在我的某个导航项目上超过1750毫秒，您会看到我的子菜单出现 - 但如果您将鼠标悬停在其上，它就会消失！我如何让它留在那里？这几乎就像我需要在悬停子菜单时取消mouseleave功能......但不确定...

我的CSS代码：

.page-wrapper {
    width:100%;
    height:100%;
}
.nav {
    position:fixed;
    height:100%;
    left:0;
    top:0;
    width:175px;
    background:#111;
    padding:20px 0;
}
.nav-item {
    height:40px;
    line-height:40px;
    padding:0 20px;
    color:#FFF;
    font-size:13px;
    cursor:pointer;
}
.nav-item:hover {
    background:#222;
}
.submenu {
    display:none;
    position:fixed;
    left:175px;
    top:0;
    width:175px;
    height:100%;
    background:#999;
}

我的jQuery代码：

var sub_menu_timer;
$('.nav-item').on({
    mouseenter:function() {
        sub_menu_timer = setTimeout(function() {
            $('.submenu').show();
        },1750)
    },
    mouseleave:function() {
        clearTimeout(sub_menu_timer);
        $('.submenu').hide();
    }
})

我的HTML代码：

<div class="page-wrapper">
    <div class="submenu"></div>
    <div class="nav">
        <div class="nav-item">
            ITEM 1
        </div>
        <div class="nav-item">
            ITEM 2
        </div>
        <div class="nav-item">
            ITEM 3
        </div>
    </div>
</div>

Answer 1

查看此更新的jsFiddle。

使用子菜单上的mouseleave事件来隐藏子菜单将更像您的预期。

新的javascript：

var sub_menu_timer;
$('.nav-item').on({
    mouseenter:function() {
        sub_menu_timer = setTimeout(function() {
            $('.submenu').show();
        },1750)
    },
    mouseleave:function() {
        clearTimeout(sub_menu_timer);
    }
});

$('.submenu').on({
    mouseenter:function() {
        $('.submenu').show();
    },
    mouseleave:function() {
        $('.submenu').hide();
    }
});

Answer 2

您只需要这么简单

$('.nav-item, .submenu').on({
    mouseenter: function () {
        $('.submenu').show();
    },
    mouseleave: function () {
        $('.submenu').hide();
    }
});

请参阅demo

更新：

如果你想保持超时，你需要像这样单独定义函数 -

var sub_menu_timer;
$('.nav-item').on({
    mouseenter: function () {
        sub_menu_timer = setTimeout(function () {
            $('.submenu').show();
        }, 1750)
    },
    mouseleave: function () {
        clearTimeout(sub_menu_timer);
        $('.submenu').hide();
    }
});


$('.submenu').on({
    mouseenter: function () {
        $('.submenu').show();
    },
    mouseleave: function () {
        $('.submenu').hide();
    }
});

如here所示，但现在当您离开submenu到nav-item时，子菜单会消失并在超时后出现。

Answer 3

.submenu不是ITEM div的子项，因此当您将鼠标悬停在子菜单上时，您正在将 out 移出ITEM div并触发.mouseleave。最简单的解决方案是制作.nav-item div的相应子菜单子项，这样只要您在.submenu上空盘旋，您就会一直悬停在它们上面。如果这不可行，则必须针对mouseleave和.submenu悬停进行更复杂的JavaScript处理。

Answer 4

执行此操作的最佳方法是使用列表，这样您就不需要JS。

HTML：

<ul class="nav">
    <li>ITEM 1
        <ul>
            <li>ITEM 1.1</li>
            <li>ITEM 1.2</li>
            <li>ITEM 1.3</li>
        </ul>
    </li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
</ul>

CSS：

html, body {
    margin: 0;
    padding: 0;
}

.nav {
    position:fixed;
    height:100%;
    left:0;
    top:0;
    width:175px;
    background:#111;
    padding:20px 0;
    margin: 0;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    height:40px;
    line-height:40px;
    padding:0 20px;
    color:#FFF;
    font-size:13px;
    cursor:pointer;
    list-style: none;
    margin: 0;
}
.nav li:hover {
    background:#222;
}
.nav li ul {
    display: none;
}
.nav li:hover ul {
    display: block;
    position:fixed;
    left:175px;
    top:0;
    width:175px;
    height:100%;
    background:#999;
}

DEMO

在mouseenter上显示子菜单但在悬停时消失

4 个答案: