0

jQuery を使用したこのフェードイン/フェードアウト効果は機能しません。エラーが発生しません。メニューは完全にレンダリングされ、機能していますが、メニューをホバーしても遅延やフェードはありません。これが実際のFIDDLEです。jQuery 1.9.1 を使用しています。CSS は大きすぎて場所を取ってしまうので投稿したくありません。また、私が推測する問題は、CSS ではなく jQuery にあります。

HTML

<ul id="nav">
    <li><a href="#">1 HTML</a>
    </li>
    <li><a href="#">2 CSS</a>
    </li>
    <li><a href="#">3 Javascript </a>

        <ul>
            <li><a href="#">3.1 jQuery</a>

                <ul>
                    <li><a href="#">3.1.1 Download</a>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a>
            </li>
            <li><a href="#">3.3 Prototype</a>
            </li>
        </ul>
    </li>
</ul>

Jクエリ

$(document).ready(function () {
    $(" #nav li").hover(

    function () {
        $(this).find('ul:first').stop(true, true).delay(1000).fadeIn("slow")
    }, function () {
        $(this).find('ul:first').stop(true, true).delay(1000).fadeOut("slow");
    }

    )

});

CSS

4

3 に答える 3

5

この CSS 部分はあなたの JS をいじっています:

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
    display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display:block;
}

それを削除する (または単に変更する) と、遅延が元に戻ります。

于 2013-07-19T09:43:02.643 に答える
0

メニューにCSSホバーとjQueryホバー効果を使用しています。そのうちの 1 つだけを使用することになっています。次のコードを CSS から削除して、機能させる必要があります。

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
    display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display:block;
}

私がお勧めするもう 1 つのことは.delay(100)、JS コードから削除することです。あなたはすでに.fade('slow')目的にかなうものを使用しています。

于 2013-07-19T09:50:38.017 に答える