jQuery：附加div会导致鼠标悬停/鼠标悬停循环
||
我有一个用于导航菜单的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>
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;
}
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;
}
});
}
没有找到相关结果
已邀请:
1 个回复
魄龟呸筹
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; } }); }