Question

我正在尝试使用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>

Answer 1

只需尝试使用以下内容：

脚本部分：

<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部分：

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

我认为这可以帮助您解决问题。

用于下拉菜单的JQuery mouseleave函数

1 个答案: