リスト項目間を移動すると jQuery メニューが壊れる

Question

ドロップダウンを備えたカスタムの jQuery 水平メニューを作成しました。当初は、リスト項目にカーソルを置くとサブメニューがフェードインし、離れるとフェードアウトするだけでした。

ただし、マウスをサブメニューの外に移動しても、すぐには消えない効果を作成したいと考えています。ピクセル単位でオーバーシュートした場合）。以前の質問で hoverIntent プラグインについて知りましたが、兄弟サブメニューを開くときに迷惑な遅延が発生します。そこで私は独自の機能を念頭に置いてゼロから始めました。

私の HTML は標準のネストされたリスト、ul#menu > li > ul > li です。私のJavaScriptは次のとおりです:

var menuVisible = false;
var cancelTimeout = false;

$(document).ready(function(){
  $('ul#menu > li').hover(
    function(){
      menuMouseOver( $(this) );
    },
    function(){
      menuMouseOut( $(this) );
    }  
  );
});

function menuMouseOver( $li )
{
  // if one of the menus is down, check which one we're hovering
  if ( menuVisible ) {
    cancelTimeout = true;  
    if ( $li.find('>ul').css('display') == 'block' ) {
      // do nothing if we're hovering over current menu
    }
    else {
      // turn off all menus
      $li.parent().find('>li').each( function() {
        menuOff( $li )
      });
    }
  }

  menuOn( $li );
  menuVisible = true;
}

function menuMouseOut( $li )
{
  setTimeout( 
    function(){
      if ( !cancelTimeout ) {
        menuOff( $li );
        menuVisible = false;
      }
      cancelTimeout = false;
    },
    2000
  );

}

function menuOn( $li )
{
  $li.css('background-position', 'left bottom');
  $li.find('>ul').fadeIn('fast');
}
function menuOff( $li )
{
  $li.css('background-position', 'left top');
  $li.find('>ul').fadeOut('fast');
}

次のことが機能します。

• トップレベルを越えた移動 li サブメニューを開きます。
• サブメニューから離れると、2 秒後にサブメニューが閉じます (テスト目的。最終バージョンでは縮小されます)。
• サブメニューから離れて戻るとタイムアウトがキャンセルされ、メニューが消えるのを防ぎます。

ただし、これらは機能しません。

• あるトップレベルのリスト項目から次のトップレベルのリスト項目に移動するときに、前のサブメニューは消えません。通常の遅延を発生させずに、すぐにフェードアウトしたいと考えています。
• 2 つのトップレベルのリスト項目間を移動すると、 menuVisible に設定されています false, 、システムが台無しになります。それの訳は cancelTimeout 最初の兄弟に移動すると true に設定され、2 番目の兄弟に移動しても true に設定されます。

なぜこれが起こるのか、そしてもちろんそれを修正する方法についての洞察をいただければ幸いです。

Answer 1

あなたは SUPERFISH のメニューjQueryプラグインを試してみました？

私は私のプロジェクトでそれを使用しましたし、私はそれはあなたのためにこれらの問題を解決すると思います。