Question

我有一个我用于导航菜单的ul。当用户将鼠标移到子li上时，我会向li附加一个“nav-about”类的div（或者nav-无论该类是针对该li的类），并且向下移动附加的div。我遇到了一个问题，我的代码被循环捕获，而li的mouseover / mouseout来回切换，直到我将鼠标移出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;
        }
    });
}

jquery：追加div导致mouseover / mouseout循环

1 个答案: