1

jqueryでメニューを作っています。http://mywash.dk/testtest/index.htmlで確認できます。

最初から表示されるサブメニュー (「Hvordan」の下) はアクティブなメニューであるため、常に表示される必要があります (別のメニュー項目にカーソルを合わせない限り、別のサブメニューが表示されます。

問題なく動作していますが、厄介なバグが 1 つあります。「Hvad」から「Hvem」にカーソルを合わせると、本来のメニューを表示する前に、アクティブなメニューをすばやく表示および非表示にします。

これが事実である理由は何ですか？

助けてくれてどうもありがとう！

Jクエリ:

$(document).ready(function() {

    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu .inpath ul').show();
    $('#menu > ul > li:not(.inpath)').hover(
    function() {
        $('ul', this).show("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){
          $('#menu li.inpath ul').hide("slide", { direction: "left" }, 400);
        }


    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li')){
            $('#menu li.inpath ul').show("slide", { direction: "left" }, 400);
        }
    });
});

HTML:

<div id="menu">

            <ul>

                <li class="test"><a href="">Hvem</a>
                <ul>
                    <li class="first-item"><a href="index.html">Submenu</a></li>
                    </ul>
                </li>
                <li class="test"><a href="">Hvad</a>
                    <ul>
                    <li class="first-item"><a href="index.html">Produkter</a></li>
                    <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath test"><a href="">Hvordan</a>

                    <ul>

                        <li class="first-item"><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item test"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>
4

1 に答える 1

1

あなたの問題は、メニュー要素を離れたり入ったりしたときにホバーアクションがすぐに呼び出されることが原因です。

hoverIntent プラグインは、問題の 1 つの可能な修正です

http://cherne.net/brian/resources/jquery.hoverIntent.html

2 番目のデモ ブロックでは、1 番目のブロックから 3 番目のブロックまでスキップできることに注意してください。

編集：

<script type="text/javascript">
$(document).ready(function() {
    $('.default').show()
    $('#menu .menuitem').hover(
    function() {
        $('.banner').each(function() {
            $(this).stop(true,true).hide();
        })
        $('ul', this).show("slide", { direction: "left" }, 400);
    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);
        $('.default').delay(500).show("slide", { direction: "left" }, 400);
    });
});
</script>

デフォルトを追加し、いくつかのクラス名を少し変更しましたが、これは実際には必要ありませんでしたが、理解できると思います。

<div id="menu">
    <ul>
        <li class="menuitem"><a href="">Hvem</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Submenu</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvad</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Produkter</a></li>
                <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvordan</a>
            <ul class="banner default">
                <li class="first-item"><a href="">Reklame</a></li>
                <li><a href="">PR</a></li>
                <li><a href="">Websites</a></li>
                <li><a href="">Illustrationer</a></li>
            </ul>
        </li>
        <li class="menuitem"><a href="">Sådan!</a></li>
    </ul>
    <div class="clear"><!--clearfix--></div> 
</div>

Jqueryサブメニュー、ホバーイン/アウトアニメーションの問題

于 2011-03-11T09:04:18.657 に答える