0

ドロップダウン付きのカスタム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に設定されているためです。

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

4

1 に答える 1

2

SuperfishメニューのjQueryプラグインを試しましたか？

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

于 2009-09-22T16:45:16.990 に答える