实在想不出更合适的标题,非常欢迎您更改它。
我有一个固定的左栏用于导航。当用户将鼠标悬停在此列中的一个导航项上时,我想在该列的右侧显示一个子菜单。我的问题是,当用户将光标移到新的子菜单元素上时,它会消失。
到目前为止,这是我所处的位置,但不确定解决此问题的最佳方法。
如果您将鼠标悬停在我的一个导航项目上超过 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>