jquery - jquery：附加 div 会导致 mouseover/mouseout 循环

Question

我有一个用于导航菜单的 ul。当用户将鼠标悬停在子 li 上时，我将带有“nav-about”类的 div 附加到 li（或 nav-无论该 li 的类是什么），然后向下滑动附加的 div。我遇到了一个问题，我的代码陷入循环并且 li 的鼠标悬停/鼠标悬停来回切换，直到我将鼠标移出 li。感谢您的任何帮助。

html

<div id="nav" class="nav">
    <ul id="header-menu" class="mainnav ">
        <li class="about">
            <a class="" id="about" href="http://www.example.com/projects/joanroot/about/">About</a>
        </li>
        <li class="paintings">
            <a class="" id="paintings" href="http://www.example.com/projects/joanroot/paintings/">Paintings</a>
        </li>
        <li class="worksonpaper">
            <a class="" id="worksonpaper" href="http://www.example.com/projects/joanroot/works-on-paper/">Works On Paper</a>
        </li>
        <li class="lectureseries">
            <a class="" id="lectureseries" href="http://www.example.com/projects/joanroot/lecture-series/">Lecture Series</a>
        </li>
        <li class="contact">
            <a class="" id="contact" href="http://www.example.com/projects/joanroot/contact/">Contact</a>
        </li>
    </ul>
</div>

css

div#nav {
    overflow: hidden;
}
.mainnav, #nav > ul {
    background: url("http://www.example.com/projects/joanroot/images/main-menu.gif") no-repeat scroll 0 0 transparent;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 973px;
}
#nav > ul > li {
    display: inline;
}
#nav > ul > li > a {
    display: block;
    float: left;
    height: 54px;
    overflow: hidden;
    text-indent: -9999px;
    z-index: 100;
}
#nav ul li a#about {
    width: 154px;
}
div.nav-about {
    background: url("http://www.example.com/projects/joanroot/images/main-menu.gif") no-repeat scroll 0 -55px transparent;
    height: 54px;
    overflow: hidden;
    position: absolute;
    width: 154px;
}

jQuery

InitilizeMenu('#header-menu',400,'slide','slide');

function InitilizeMenu(parent,moveSpeed,inStyle,outStyle) {
    $(parent).children('li').each(function() {
        var thisClass = $(this).attr('class');
        AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle);
    });
}

function AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle) {
    $(parent+' .'+thisClass).mouseover(function() {
        $(this).append('<div class="nav-'+thisClass+'"></div>')
        switch(inStyle) {
            case 'slide':
                $('div.nav-'+thisClass).css({display:'none'}).slideDown(moveSpeed);
                break;
            case 'fade':
                $('div.nav-'+thisClass).css({display:'none'}).fadeIn(moveSpeed);
                break;
            case 'none':
                $('div.nav-'+thisClass);
                break;
            default:
                $('div.nav-'+thisClass);
                break;
        }
    }).mouseout(function(){
        switch(outStyle) {
            case 'slide':
                $('div.nav-'+thisClass).slideUp(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'fade':
                $('div.nav-'+thisClass).fadeOut(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'none':
                $('div.nav-'+thisClass).remove();
                break;
            default:
                $('div.nav-'+thisClass).remove();
                break;
        }
    });
}

Answer 1

为什么不使用.hover()代替：

function AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle) {
    $(parent+' .'+thisClass).hover(function() {
        $(this).append('<div class="nav-'+thisClass+'"></div>')
        switch(inStyle) {
            case 'slide':
                $('div.nav-'+thisClass).css({display:'none'}).slideDown(moveSpeed);
                break;
            case 'fade':
                $('div.nav-'+thisClass).css({display:'none'}).fadeIn(moveSpeed);
                break;
            case 'none':
                $('div.nav-'+thisClass);
                break;
            default:
                $('div.nav-'+thisClass);
                break;
        }
    }, function() {
        switch(outStyle) {
            case 'slide':
                $('div.nav-'+thisClass).slideUp(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'fade':
                $('div.nav-'+thisClass).fadeOut(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'none':
                $('div.nav-'+thisClass).remove();
                break;
            default:
                $('div.nav-'+thisClass).remove();
                break;
        }
    });
}