導航欄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;
}