Question

所以我的菜单导航设置如下：

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

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

使用$.hover()正确的方法来实现这一目标吗？如果不能如何编码以避免下拉缩回？

编辑我删除了关于保持菜单扩展的小提琴中的所有代码。我之所以这样做是因为我的代码都不起作用。

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

Answer 2

好的，所以在一个愉快的周末之后，我能够解决我的问题。它要求重写html（尽可能多我不想），现在效果很好。 @ user1835565和@Sjors van Dongen，感谢您的帮助。它帮助我指引正确的道路：）

因此，html结构现在变为：#nav -> ._butt -> ._menu -> ._arrow

按钮上的悬停事件将按钮和选择器（悬停与否）发送到功能。然后函数获取元素并获取子元素（菜单，箭头）。最后，它根据选择器数据添加（或删除）类。

tldr;这是fiddle，请查看。

<强> HTML

<div id="nav">

    <div id="home" class="_butt">Home
        <div class="_noMenu _endLeft">
            <div class="_arrow"></div>
        </div>
    </div>

    <div id="mine" class="_butt">My Account
        <div class="_menu">
            <div class="_arrow"></div>
        </div>
    </div>

    <div id="course" class="_butt">Courses
        <div class="_menu">
            <div class="_arrow"></div>
        </div>
    </div>

    <div id="cal" class="_butt">Calendar
        <div class="_noMenu">
            <div class="_arrow"></div>
        </div>
    </div>

    <div id="contact" class="_butt">Contact
        <div class="_noMenu _endRight">
            <div class="_arrow"></div>
        </div>
    </div>

</div>

<强> CSS

p, span, div {
    padding: 0;
    margin: 0 auto;
}

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

._butt {
    width: 100px;
    height: 50px;
    background: #000;
    color: #00A3EF;
    text-align: center;
    line-height: 48px;
    position: relative;
    float: left;
}

._butt:hover {
    background: #4c4c4c;
}

._arrow {
    width: 0;
    height: 0;
    border-bottom: #bfefff solid 18px;
    border-right: transparent solid 18px;
    border-left: transparent solid 18px;
    position: relative;
    padding: 0;
    margin: 0 auto;
    bottom: 9px;
    z-index: -1;
}

._show {
    z-index: 1
}

._dropShow {
    margin: 0;
    left: 32px;
    z-index: 1
}

._menu {
    width: inherit;
    height: 10px;
    background: #bfefff;
}

._noMenu {
    width: inherit;
    height: 10px;
    background: #bfefff;
}

._endLeft {
    border-bottom-left-radius: 8px;
}

._endRight {
    border-bottom-right-radius: 8px;
}

.hoverIt {
    animation: drop .3s;
    -webkit-animation: drop .3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}



@keyframes drop {
    from { height: 10px; }
    to { height: 100px; }
}

@-webkit-keyframes drop {
    from { height: 10px; }
    to { height: 100px; }
}

<强> JS

$('._butt').hover( function(e) { menuSelect( e.target, 1 ) }, function(e) { menuSelect( e.target, 0 ) });

function menuSelect( tar, sel ) {
    var thisButt = $(tar);
    if( thisButt.children( "._menu" ) ) {
        thisMenu = thisButt.children( "._menu" ),
        thisArrow = thisMenu.children( "._arrow" );
        if( sel == 1 ) {
            thisMenu.addClass( "hoverIt _endLeft _endRight" );
            thisArrow.addClass( "_dropShow" );
            dropMenu( thisButt, 1 );
        }
        if( sel == 0 ) {
            thisMenu.removeClass( "hoverIt _endLeft _endRight" );
            thisArrow.removeClass( "_dropShow" );
            dropMenu( thisButt, 0 );
        }
    }
    if( thisButt.children( "._noMenu" ) ) {
        thisMenu = thisButt.children( "._noMenu" );
        thisArrow = thisMenu.children( "._arrow" );
        if( sel == 1) {
            thisArrow.addClass( "_show" );
        }
        if( sel == 0 ) {
            thisArrow.removeClass( "_show" );
        }
    }
}

function dropMenu( par, sel ) {
    var def_butt = 100,
        _buttIndex = 5,
        ch = par.children();
    if( sel == 1 ) {
        if( ch.hasClass( "_menu" ) ) {
            var chIndex = par.prevAll().length;
            ch.css( "width", (_buttIndex - chIndex) * def_butt );
        }
    }
    if( sel == 0 ) {
        ch.css( "width", def_butt );
    }
}

离开初始菜单按钮时菜单缩进

2 个答案: