1

私は独自のjQueryナビゲーションメニューを開発していますが、メインナビゲーションメニューの選択からフォーカスが離れるとすぐにサブメニューが消えるため、少し問題が発生しました。これには簡単な解決策があるに違いないことはわかっていますが、これに何時間も費やして、何か助けが必要だと考えました.

以下にコードを示します。

jQuery:

$(document).ready(function() {

        $('.myMenu li ul').hide(); //hide all sub menus

        $('.myMenu > li').mouseenter(function() {
            $(this).find('ul').stop(true, true).fadeIn("fast");
        });

        $('.myMenu > li').mouseout(function() {
            $(this).find('ul').stop(true, true).fadeOut("fast");
        });
    });

HTML:

<div id="navigation">
<ul class="myMenu">
    <li><a href="#">Main 1</a></li>
    <li><a href="#">Main 2</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
            <li><a href="#">Sub 5</a></li>
            <li><a href="#">Sub 6</a></li>
            <li><a href="#">Sub 7</a></li>
            <li><a href="#">Sub 8</a></li>
            <li><a href="#">Sub 9</a></li>
        </ul>
    </li>
    <li><a href="#">Main 3</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
            <li><a href="#">Sub 3</a></li>
        </ul>
    </li>  
    <li><a href="#">Main 4</a></li>
    <li><a href="#">Main 5</a></li>
    <li><a href="#">Main 6</a></li>
    <li><a href="#">Main 7</a></li>
    <li><a href="#">Main 8</a></li>
</ul>
</div>

どんな助けでも喜んでいただければ幸いです！

4

2 に答える 2

2

これは、上記の正確なコードをメソッドの正しい形式に変換したものであり、便利に組み合わせて1 つの.hover()メソッドにします。mouseentermouseleave

$('.myMenu > li').hover(
    function() {
        $(this).find('ul').stop(true, true).fadeIn("fast");
}, 
    function() {
        $(this).find('ul').stop(true, true).fadeOut("fast");
});

ご指摘のように問題が解決したようです。「メイン 2」と「メイン 3」は、対応するサブメニュー内にいるときは開いたままです。

http://jsfiddle.net/Zr5ca/1

于 2011-11-01T22:33:20.677 に答える
1

あなたの問題をいくらか簡単にするために私がしたことは次のとおりです。http://jsfiddle.net/raynesax/GWvVj/5/

于 2011-11-01T19:34:36.467 に答える