0

实在想不出更合适的标题，非常欢迎您更改它。

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

到目前为止，这是我所处的位置，但不确定解决此问题的最佳方法。

我的项目的小提琴

如果您将鼠标悬停在我的一个导航项目上超过 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>
4

4 回答 4

2

你所需要的就是这么简单

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

看演示

更新：

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

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();
    }
});

如此处所示，但现在当您移出submenutonav-item时，子菜单会消失并在超时后出现。

于 2013-09-04T14:39:27.257 回答
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();
    }
});
于 2013-09-04T14:38:17.450 回答
0

The best way to do this, is by using a list, that way you don't need 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.

于 2013-09-04T14:37:03.080 回答
0

.submenu不是 ITEM div 的子项，因此当您将鼠标悬停在子菜单上时，您将悬停在ITEM div 之外并触发.mouseleave. 最简单的解决方案是使.nav-itemdiv 的相应子菜单子菜单，这样只要您悬停在它们上，您就会一直悬停在它们上面.submenu。如果这不可行，您将不得不针对鼠标离开和.submenu悬停进行更复杂的 JavaScript 处理。

于 2013-09-04T14:29:33.230 回答