Question

我试图在javascript / jquery中设计一种特定类型的导航栏。

当鼠标在mouseenter()个对象之间传递时，我无法让mouseleave()和li正常工作。

这是我的代码。有什么想法吗？

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>

同样在 Playground 。

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

导航栏mouseenter / mouseleave在li元素之间无效

2 个答案: