0

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

1 に答える 1

0

次のことを試してみてください：

スクリプトパート：

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

これはあなたの問題を解決するのに役立つかもしれないと思います。

于 2013-01-19T16:31:54.717 に答える