2

私は完全な絶対 jQuery 初心者です。CSS/jQuery ナビゲーション メニューを自分のサイトに追加するためのチュートリアルに従っていましたが、動作するようになりました。ドロップダウン メニューがすぐに消えてしまうため、追加してほしいのはマウス アウトのわずかな遅延だけです。マウスアウトすると、メニューが少し使いづらくなります。これが私のスクリプトです：

function mainmenu(){
$(" .top-menu ul ").css({display: "none"}); // Opera Fix
$(" .top-menu li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
  });
}

 $(document).ready(function(){
 mainmenu();
});

このスクリプトに必要なコードを追加してくれる人はいますか? 私はあなたがそれをどのようにやったかを研究することを約束するので、私は実際にそれから学びます;-D

4

2 に答える 2

5

500 ミリ秒の遅延を与えると、次のようなことができます。

function mainmenu(){
  $(".top-menu ul ").hide();
  $(".top-menu li").hover(function() {
    clearTimeout($.data(this, 'timeout'));
    $(this).find('ul:first').show(400);
  }, function() {
    $.data(this, 'timeout', setTimeout($.proxy(function() { 
       $(this).find('ul:first').hide();
    }, this), 500));
  });
}
$(mainmenu);

これにより、500ミリ秒の遅延が追加さsetTimeout()れ、要素を使用してタイマーIDが保存$.data()されます。要素に戻ると、タイムアウトがクリアされ、オーバーアウトするまで再度実行されません...非表示にするために、要素を 500 ミリ秒オフにします。

または、この問題のためのhoverIntentプラグインで非常に似たようなことをしてください。

于 2010-09-03T11:55:06.457 に答える
1 
$(" .top-menu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){

    // Note here...
    setTimeout(function(){
        $(this).find('ul:first').css({visibility: "hidden"});
    }, 2000);
    // 2000 is a delay time in milliseconds, change it

});
于 2010-09-03T11:56:04.060 に答える