0

一部の要素に単一レベルのドロップダウンがあるナビゲーション システムがあります。マウスをナビに沿って移動すると、ナビの下部から簡単に外れてしまうことを除いて、私はそれを思い通りに動作させました（インラインアイテムの2番目の全幅ラインドロップダウンです）。

私が必要としているのは、他のナビゲーション項目に干渉することなく、下に落ちたときにナビゲーションが消えるのを防ぐ方法です (そのため、これらの上にカーソルを置いたときにナビゲーションが即座に非表示になります)。

ホバー アウト イベントが呼び出されたときに、マウスを置いている要素を見つける方法はありますか? このようにして、彼らが体の上にマウスを置いているかどうかを検出し、タイマーを開始して 1000 ミリ秒程度でナビを非表示にすることができました。

私は hoverIntent を試しましたが、あるナビゲーション項目から別のナビゲーション項目への移動を遅らせる余裕がないため、これは私が必要としているものには機能しません...それはナビゲーションを非常に使いにくくします!

それか、マウスの位置を使用して単にナビゲーションの下部から落ちたかどうかを検出する方法はありますか?

どんな助けでも大歓迎です。現在のナビゲーションの Jquery は次のとおりです。

var navDisplayTimer;
var navDisplayObject;
$("#main-nav > li").addClass("js-enabled");
$("#main-nav > li").hover(function(){
 $(this).addClass("hovered");
 if ($(this).find("ul").length != 0) {
  $(this).parent().stop().animate({borderWidth: "22px"}, 400);
  if($(this).parent().css("borderWidth") == "22px 22px 22px 22px") {
   $(this).find("ul").show();
  } else {
   navDisplayObject = this;
   navDisplayTimer = setTimeout(function() {
    $(navDisplayObject).find("ul").show();
   }, 300);
  }
 }
},function(){
 clearTimeout(navDisplayTimer);
 $(this).find("ul").hide();
 $(this).parent().stop().animate({borderWidth: "2px"}, 400);
 $(this).removeClass("hovered");
});
4

1 に答える 1

1

現在のアプローチとは少し逆に、ユーザーがメニューdivから移動したときにイベントが発生する可能性がありますが、これを行うにはタイムアウトを使用します。

これに加えて、メニューdivのナビゲーション項目にマウスを合わせると発生するイベントがあり、クローズタイムアウトをクリアします。

これにより、基本的にユーザーとマウスを戻す機会が与えられます。試してみて、自分の考えを確認してください。

$('#selectednavigationdiv').bind("mouseout", close);
$('#selectednavigationitems').bind("mouseover", function() { clearTimeout(hideTimer ); });// stop drop down menu from being closed

var hideTimer = setTimeout(function() {  }, 1);//initialise so not undefined
function close() {
    clearTimeout(hideTimer );
    hideTimer = setTimeout(function() { $('#selectednavigationdiv').slideUp('fast') }, 1000);//close drop down menu                    
}
于 2009-11-04T18:29:24.473 に答える