javascript - 离开初始菜单按钮时菜单缩回

Question

所以我的菜单导航是这样设置的:

• 菜单按钮是内联 block div，设置为 float: left
• 将鼠标悬停在按钮上时，会出现箭头选择器
• 将鼠标悬停在带有额外选项(更多菜单)的按钮上时，会出现下拉菜单
• 当您从一个按钮移动到另一个按钮时，箭头和下拉菜单会消失并重新出现在当前选定的按钮上

现在，问题在于菜单的缩回。向下移动并离开按钮时，我似乎无法让菜单保持打开状态(而不是缩回)。当前设置使用 $.hover() 为选择器箭头和下拉菜单设置动画。

使用 $.hover() 是完成此任务的正确方法吗？如果不是，如何编码以避免下拉收回？

编辑 我删除了 fiddle 中与保持菜单展开有关的所有代码。我这样做是因为我的代码都不起作用..

HTML:

<div id="nav">

    <div id="home" class="button selected">Home
        <div class="arrow"></div>
    </div>
    <div id="mine" class="button">My Account
        <div class="arrow"></div>
    </div>
    <div id="course" class="button">Courses
        <div class="arrow"></div>
    </div>
    <div id="cal" class="button">Calendar
        <div class="arrow"></div>
    </div>
    <div id="contact" class="button">Contact
        <div class="arrow"></div>
    </div>

    <div id="selBar">
        <div id="home_opt" class="box_opt"></div>
        <div id="mine_opt" class="box_opt"></div>
        <div id="course_opt" class="box_opt"></div>
        <div id="cal_opt" class="box_opt"></div>
        <div id="contact_opt" class="box_opt"></div>
    </div>
</div>

CSS:

div, p, span {
    padding: 0;
    margin: 0 auto
}
#nav {
    width: 500px;
    height: 75px;
    position: relative;
}
.button {
    background: #000;
    color: #00A3EF;
    width: 100px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 48px;
    float: left;
    cursor: pointer;
}
.arrow {
    width: 0;
    height: 0;
    border-bottom: 14px solid #bfefff;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    position: relative;
    bottom: 12px;
    z-index: -1;
    margin-bottom: 10px;
}
#selBar {
    background: #bfefff;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 18px;
    z-index: -1
}
.box_opt {
    background: #bfefff;
    width: 100px;
    height: 10px;
    position: relative;
    float: left;
    bottom: -80%;
}
.selected {
    background: #333333;
}
.button:hover {
    background: #4c4c4c;
}

jQuery:

$('.button').click(function (e) {
    var target = $(e.target);
    $('.selected').each(function () {
        $(this).toggleClass("selected");
    });
    target.toggleClass("selected");
});

$('.button').hover(function () {
    var link,
    classLink,
    linker = "_opt";

    $(this).children(".arrow").css("z-index", "0");
    link = $(this).attr("id");
    switch (link) {
        case 'home':
            break;
        case 'mine':
            classLink = "#" + link + linker;
            expandBar(0);
            break;
        case 'course':
            expandBar(1);
            break;
        case 'cal':
            expandBar(2);
            break;
        case 'contact':
            expandBar(3);
            break;
        default:
            break;
    }

}, function () {
    console.log("button left");
    $('.arrow').css("z-index", "-1");
    $('.box_opt').css("height", "10px");
});

function expandBar(start) {
    var childIndex = "#selBar div:gt(" + start + ")";
    $(childIndex).css("height", "100px");
}

感谢您提供的所有帮助。

JsFiddle here

Answer 1

我想我可以通过检查用户悬停的元素来获得您想要的东西。使用指定元素的 e.target

DEMO