导航栏mouseenter / mouseleave在li元素之间不起作用

Question

我正在尝试在javascript / jquery中设计特定类型的导航栏。

当鼠标在li对象之间经过时，我无法使mouseenter()和mouseleave()正常工作。

这是我的代码。 有任何想法吗？

http://jsfiddle.net/richofwombwell/1v8L0pdz/38/

function inversebuttonon(liId, aId) {
    $(liId).css('background-color', 'white');
    $(aId).css('background-color', 'white');
    $(aId).css('color', '#0086CA');
}

function inversebuttonoff(liId, aId) {
    $(liId).css('background-color', '#0086CA');
    $(aId).css('background-color', '#0086CA');
    $(aId).css('color', 'white');
}

function showselectedmenu(liclass, aclass) {
    $('.menu').css('max-height', '100px');
    $(liclass).css('display', 'inline');
    $(aclass).css('display', 'inline');
}

function dontshowselectedmenu(liclass, aclass) {
    $('.menu').css('max-height', '0px', 'none');
    $(liclass).css('display', 'none');
    $(aclass).css('display', 'none');
}

$('#n-2').mouseenter(function () {
    inversebuttonon('#n-2', '#a2');
    showselectedmenu('.tmenuli', '.tmenua1');
});

$('.menu').mouseleave(function () {
    dontshowselectedmenu('.tmenuli', '.tmenua1');
    inversebuttonoff('#n-2', '#a2');
});

$('#n-3').mouseenter(function () {
    inversebuttonon('#n-3', '#a3');
    showselectedmenu('.tmenuli2', '.tmenua2');
}); 

$('.menu').mouseleave(function () {
    dontshowselectedmenu('.tmenuli2', '.tmenua2');
    inversebuttonoff('#n-3', '#a3');
});

Answer 1

您的脚本无法正常工作，因为您的html代码无效（您嵌套的是DIV，而不是列表元素。这会迫使浏览器更正您的代码（它想要的方式）。

在继续编写脚本之前，请考虑使用CSS解决方案：

  * { box-sizing: border-box; font-family: sans-serif; font-size: 16px; } .my_menu { height: 66px; text-align: center; width: 100%; overflow: } .my_menu ul { list-style: none; } .my_menu ul li { display: inline-block; } .my_menu > ul { position: relative; background: none #0086CA; } .my_menu ul a { text-decoration: none; color: #fff; display: inline-block; } .my_menu > ul > li > a { padding: 15px 20px; } .my_menu > ul > li > a:hover, .my_menu > ul > li a:focus { color: #0086CA; background: #fff; } .my_menu ul ul { background: none grey; position: absolute; top: 100%; left: 0; right: 0; width: 100%; display: none; } .my_menu ul li:hover ul { display: block; } .my_menu ul ul a { padding: 5px 10px; } .my_menu ul ul a:hover, .my_menu ul ul a:focus { background: none black; } 

 <header> <nav class="my_menu"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">menuitem1</a> <ul> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> </li> <li> <a href="#">menuitem2</a> <ul> <li><a href="#">item5</a></li> <li><a href="#">item6</a></li> <li><a href="#">item7</a></li> <li><a href="#">item8</a></li> </ul> </li> </ul> </nav> </header> 

同样在游乐场 。

Answer 2

您可能可以清理掉它，但是如果您坚持使用脚本方法，这将可以工作：用更少的id等扩展它也应该更容易。只需添加标记即可。 这里的工作示例： http : //jsfiddle.net/MarkSchultheiss/fLqs1nru/2/

function showmenu(targ, me) {
    $('.menuitem').removeClass('menu-on');
    $(me).parent().addClass('menu-on');
    $('.menu').hide();
    $('.' + targ).show();
}
$('.menuitem a').mouseenter(function () {
    var targ = $(this).parent().data("targetmenu");
    showmenu(targ, this);
});
$('nav').mouseleave(function () {
    $('.menuitem ').removeClass('menu-on');
    $('.menu').hide();
});

调整标记，摆脱div并添加一些类。 为要使用的目标菜单添加一个数据元素。

<nav>
    <ul class="ulparent">
        <li class="navitem" id="n-1"><a href="" id="a1">Home</a> 
            <li class="navitem menuitem" data-targetmenu="menu1"><a href="" id="a2">menuitem1</a>
            </li>
            <li class="navitem menuitem"  data-targetmenu="menu2"><a href="#" >menuitem2</a>
            </li>
            <ul class="menu menu1">
                <li><a href="">item1</a></li>
                <li><a href="">item2</a></li>
                <li><a href="">item3</a></li>
                <li><a href="">item4</a></li>
            </ul>
            <ul class="menu menu2">
                <li><a href="">item5</a></li>
                <li><a href="">item6</a></li>
                <li><a href="">item7</a></li>
                <li><a href="">item8</a></li>
            </ul>
    </ul>
</nav>

将此添加到您的CSS末尾（它可能更干净，但这仅是附加的：）

.menu-on {
    background-color: white;
}
.menu-on a {
    color:#0086CA;
}
.menu {
    max-height:100px;
    display:none;
}