2

キーボードからドロップダウンメニューにアクセスできるようにしようとしています（Tabのみを使用し、アクセスキーは使用しません）。サブアイテムにアクセスできるようにする方法がわかりません。

望ましい動作は次のとおりです。「アイテム」がクリックされるか、フォーカスがあると、リストが表示されます。「項目」がフォーカスを失ったとき (ぼかし時)、「サブ項目」にフォーカスがない場合 (キーボードからアクセスしたことを意味します)、リストを非表示にします。

フィドル: http://jsfiddle.net/DBdbz/

HTML

<p id="ui"><a href="#">Item</a></p>
<ul>
    <li><a href="#">Sub item 1</a></li>
    <li><a href="#">Sub item 1</a></li>
    <li><a href="#">Sub item 1</a></li>
</ul>

JS

$('ul').hide();

$('#ui a').on('focus', function() {
  $('ul').show();
});

$('#ui a').on('blur', function() {
  $('ul').hide();
});

ご協力いただきありがとうございます。

4

3 に答える 3

2

これは、タブを正しく行う別のフィドルです。「アイテム」をクリックしても元のフィドルがメニューを開かなかったので、それが何を意味するのかわかりません。

http://jsfiddle.net/DBdbz/4/

このコードは、タブを機能させるためにあなたの後に続きます：

$("ul a").on('focus', function() {
    $('ul').show();
});

$("ul a").on('blur', function() {
    $('ul').hide();
});
于 2013-02-26T21:32:42.227 に答える
2

これはどうですか: http://jsfiddle.net/DBdbz/6/ ?

すべてのブラウザーでフォーカス/ぼかしを機能させるために必要なのは、特定の要素のタブインデックスだけです (どの要素であっても、Lee のリンクを参照してください)。

<p id="ui"><a href="#" tabindex="1">Item</a></p>
<ul>
    <li><a href="#">Sub item 1</a></li>
    <li><a href="#">Sub item 1</a></li>
    <li><a href="#">Sub item 1</a></li>
</ul>

そして、ここにJSが来ます：

$('ul').hide();

$('#ui a').on('focus', function() {
  $('ul').show();
});

$('#ui a').on('keydown', function(e) {
  if (e.keyCode == 9) {
    $('ul').addClass('tab');
  }
});

$('ul').on('mouseover', function() {
  $('ul').addClass('mouse');
});

$('ul').on('mouseout', function() {
  $('ul').removeClass('mouse').removeClass('tab');
});

$('ul li:last-child a').on('blur', function() {
  if ($('ul').hasClass('tab')) {
    $('ul').hide().removeClass('tab');
  } 
});

$('#ui a').on('blur', function() {
  if (!$('ul').is('.tab, .mouse')) {
    $('ul').hide();
  }
});
于 2013-02-28T12:00:46.113 に答える
0

次のことを試すことができます。

$('ul').hide();

$('#ui a').on('focus', function() {
  $('ul').show();
});

$('#ui a').on('blur', function() {
  if ($('ul li').is(':focus').length < 1) $('ul').hide();
});

ul の li がどれもフォーカスされていない場合にのみ、ul を非表示にします。

于 2013-02-26T16:27:07.343 に答える