0

メニューバーウィジェットを使用して、jQueryUIナビゲーションメニューを作成しました。動作を少し変えたい場合を除いて、期待どおりに動作します。ここでわかるように、 http://jsfiddle.net/hcharge/DebVr/サブメニューが展開され、クリックされたリンクを基準にして配置されます。

どのリンクをクリックしても、サブメニューは常に同じ幅のままになり、ナビゲーションバーの左側に拡大して貼り付けたいと思います。この画像のように...

ここに画像の説明を入力してください

コンテナを基準にして位置を設定し、サブメニューを絶対的に配置しようとしましたが、jQueryUIの配置がこれをオーバーライドしていると思います。どんなアドバイスも素晴らしいでしょう、乾杯。

編集：これはJSで行う必要があります。これは、ドロップダウンをトリガーするホバーアクションではなく、クリックである必要があるためです。

4

1 に答える 1

2

CSSだけで全部やってみませんか？

http://jsfiddle.net/DebVr/8/を参照してください

注：白い境界線を見るために、背景は青です。

編集：

いくつかの機能が必要な場合は、後で追加できますが、基本はCSSにあるべきだと思います。

ここでいくつかの機能を備えた私のコードを参照してください：http：//jsfiddle.net/DebVr/11/

var links=$('#bar1>li>a').each(function(index,obj) {
  obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
    function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
    function(){$('#bar1>li>ul').hide();}
);

編集2：

クリックしたときにサブメニューを再び非表示にする場合は、次のコードを使用します。

var links=$('#bar1>li>a').each(function(index,obj) {
  obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
    $(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
    $(this).siblings('ul').toggleClass('show');
});

$('#bar1>li>a').blur(function(){
   $(this).siblings('ul').removeClass('show');
});

そしてCSS：

#bar1>li>ul.show{
    display:block;
}

ここでそれを参照してください：http：//jsfiddle.net/DebVr/16/

編集3：

上記のコードでは、を置き換えobj.tabindexてobj.tabIndex、jsfiddleを更新しました。

問題は、サブメニューをクリックすると、アンカーがフォーカスを失い、サブメニューが消えることです。focusChromeでは、イベントを#bar1>liの代わりに設定することで簡単に修正できますが#bar1>li>a、Firefoxではイベントが機能しません...私は解決策に取り組んでいますが、その間、http：//jsfiddle.net/DebVr/を使用できます16/。

編集4：

最後に、修正されたコード：http: //jsfiddle.net/DebVr/18/

Chrome、Firefox、IEで動作します。

于 2012-08-17T13:32:32.903 に答える