我试图使用Jquery/CSS创建一个动画下拉菜单,并有动画,使它看起来很好,但我需要它来隐藏下拉菜单onmouseout,但只是使用onmouseout不会与ul工作,当我悬停在一个li它触发它。读过其他的帖子,我以为我可以使用JQuery的mouseleave功能,但不能让它工作,有人能帮助吗?
菜单:
<ul id="navList">
<li><a href="/">Home</a></li>
<li id="about" onmouseover="dropDown();" ><a href="#">About me</a>
<ul id="drop">
<li>What I do</li>
<li>CV</li>
<li>Photo Gallery</li>
</ul>
</li>
</ul>
显示下拉列表的函数:
<script type="text/javascript">
function dropDown ()
{
$("#drop").animate({height:'100px'},300);
$("#drop").animate({opacity:'100'},300);
};
</script>
我试图用来隐藏它的函数:
<script type="text/javascript">
$('#about').mouseleave(function(){
$("#drop").animate({height:'0px'},300);
$("#drop").animate({opacity:'0'},300);
});
</script>
试试用以下:
脚本部分:
<script type="text/javascript">
function dropDown ()
{
$("#drop").show().animate({height:'100px'},300).animate({opacity:'100'},300);
}
function mouseOut()
{
$("#drop").animate({height:'0px'},300).animate({opacity:'0'},300);
}
$(function() {
$("#drop").hide();
$("#about a").hover(dropDown,mouseOut);
});
</script>
HTML Part:
<ul id="navList">
<li><a href="/">Home</a></li>
<li id="about"><a href="#">About me</a>
<ul id="drop">
<li>What I do</li>
<li>CV</li>
<li>Photo Gallery</li>
</ul>
</li>
</ul>
我想这也许能帮助你解决你的问题。