2

私はこのjsコードを試しました:

<script type="text/javascript">

       $(document).ready( function() {
            var timer;
            $('.top-menu-first-ul li').hover(function(){
                        if(timer) {
                                clearTimeout(timer);
                                timer = null
                        }
                        timer = setTimeout(function() {
                                   $(this).find('ul').slideToggle(100);
                        }, 500)
            },
            // mouse out
            });
        });


</script>

このhtmlで：

<ul class="top-menu-first-ul">
    <li>
        <a href="http://google.com">Google</a>
        <ul class="top-menu-second-ul">
            <li><a href="http://translate.google.com">Google Translate</a></li>
            <li><a href="http://images.google.com">Google Images</a></li>
            <li><a href="http://gmail.google.com">Gmail</a></li>
            <li><a href="http://plus.google.com">Google Plus</a></li>
        </ul>
    </li>
    <li>
        <a href="http://facebook.com">Facebook</a>
    </li>
    <li>
        <a href="http://twitter.com">Twitter</a>
    </li>
</ul>

しかし、それは機能していません。

Googleリンクなどにカーソルを合わせるとサブメニューが表示され、300ms後にその他が表示されます。

そのため、ユーザーがサブメニューをすばやくホバーし、少なくとも 300 ミリ秒ホバー リンクにとどまらない場合に、サブメニューをロードしないようにする必要があります。

次に、彼がリンクを離れたときにコードの実行を停止する (または上にスライドする) 必要があります。彼が何度も何度も何度も何度も戻ってきた場合、彼はホバリングをやめ、コードはまだ実行されているため、リンクの上に何回ホバリングしたか. 私は何とかこれが起こらないようにする必要があります。

編集: hoverIntent などのプラグインなしでこれを解決する必要があります。可能であれば、単純な javascript と jQuery だけです

4

2 に答える 2

6

stop()アニメーションのおかしさ防止とdelay()300ms待ちに使います。また、代わりにhover()使用することをお勧めします。on()

$('.top-menu-first-ul li').on({
  mouseover: function() {
    $(this).find('ul').stop(1,1).delay(300).slideDown(100);
  },
  mouseleave: function() {
    $(this).find('ul').stop(1,1).slideUp(100);
  }
});

デモ: http://jsfiddle.net/elclanrs/6dtWz/

于 2012-09-08T22:04:08.410 に答える
3

$(this)問題は、タイムアウトで呼び出される関数内で使用することだと思います。$(this)このクロージャーの内側は、外側と同じではありません (jQuery が設定する jQuery イベント ハンドラーの内側)。ここ（jsfiddle）が解決策です：

$(document).ready( function() {
            $('.top-menu-first-ul li').mouseenter(mouseIn);
            $('.top-menu-first-ul li').mouseout(mouseOut);
});
function mouseIn(e){
    var target = $(this);
    var timer = setTimeout(function() {
                   target.find('ul').slideDown(100);
        }, 500);
    target.attr("data-timer", timer);
}

function mouseOut(e){
    var target = $(this);
    var timer = target.attr("data-timer");
    if(timer){
        clearTimeout(timer);
    }
    target.find('ul').slideUp(100)
}
​

更新このソリューションはあなたのものに基づいていますが、@ elclanrsのソリューションを使用することをお勧めします(より読みやすく、これを目的としたjQuery APIを使用しています)。

于 2012-09-08T22:04:56.440 に答える