0

特定のリンクの下にサブメニューを表示したいナビゲーションメニューがあります。一般的なレイアウトは次のとおりですhttp://jsfiddle.net/hcharge/HGtTz/

以前は jQuery hoverintent を使用してメニューを下に表示していましたが、今回はホバーなしでクリックして表示し、キーボードでタブ移動できるようにしたいと考えています。

私はjQueryを初めて使用し、メニューを表示しようとしましたが、運が悪かったのですが、誰かが私を正しい方向に向けることができますか? これは非常に単純で、ドロップダウン内に何も表示されず、クリックなどでスライドダウンすると思いますか?

ボックスの外側または別のリンクをクリックした場合も、メニューを閉じる必要があります。どうもありがとう。

4

3 に答える 3

1

tabindexとjqueryを使用して、必要なものをトリガーするよりもフォーカスイベントにバインドします

​$("li a").focus(function() {
    $(this).parent().find('ul').slideDown(200); // example of targeting nested UL with slide down animation
});

このように機能し、blurイベントを使用してそのサブメニューを非表示にする必要があります

​$("li a").blur(function() {
        // your code here to hide submenu
    });

クリックイベントを有効にするには：

​$("li a").click(function() {
   // target all opened submenus and hide them by its class name
   $("ul.active-submenu").slideUp(200).removeClass("active-submenu"); 
   // adds class to submenu so you can determine easily which is active
   $(this).parent().find('ul').slideToggle(200).toggleClass('active-submenu');
});
于 2012-08-15T13:21:56.973 に答える
1

これはアクセシビリティのためですか？もしそうなら、tabindexを試してください

http://www.w3schools.com/tags/att_standard_tabindex.asp

于 2012-08-15T13:02:58.997 に答える