5

キーボードでアクセス可能なメニューを作成しようとしていますが、ドロップダウンをフォーカスで表示する方法がわかりません。

私は持っている

.main-menu li:hover ul,
.main-menu li:focus ul {
    display: block;
}

問題は、li にネストされた a に焦点を合わせ、ul を表示しないことです。タブ移動は a タグに焦点を当てています。

ここに私の完全なコードがあります: http://jsfiddle.net/bxpe4/

4

2 に答える 2

7

ここで使用できる別のプロパティは です:focus-within。したがって、以下のようなことを行うと、それも機能するはずです。

.main-menu li:hover ul,
.main-menu li:focus-within ul {
    display: block;
}

focus-within疑似クラスは、現在の要素だけでなく、そのすべての子も考慮します。この問題に対するかなりクリーンな解決策であり、私の問題に対してはうまくいったと思います。

于 2019-10-03T18:10:58.763 に答える
4

タブ移動するときは、それ自体ではなく、anchor内部に焦点を合わせます。.main-menu lilist-item

次の 2 つの回避策があります。

a)+セレクターの使用

.main-menu li a:focus + ul {
    display: block;
}

ただし、これにより、他のアンカーへのタブ移動が問題になります (タブを押すと、サブメニューの最初のアンカーに移動するはずですが、非表示になるため、何も起こりません)。

b)tabindexプロパティの使用

tabindexこれには、メニュー アンカーを負の値に設定し (タブ移動から削除)、タブ移動をリスト項目に設定する必要があります。

tabindex デモの使用を参照してください

赤い背景を表示するには、アンカーとリスト項目のスタイルを変更して、新しいセレクターを追加する必要があります。

.main-menu li a:hover,
.main-menu li a:focus,
.main-menu li.dropped > a,
.main-menu li:focus > a /* this one was added */ {
    /* your styles */
}

ただし、フォーカスされたリスト項目は、キーボードを使用してアンカーにアクセスできないことを意味するため、これは実際には良い方法ではありません。JavaScript を使用してイベントをシミュレートできます (リスト項目のキープレスをアンカーをクリックするようにバインドします)。jQuery では、次のようになります。

$('li[tabindex]').on('keypress', function() {
    $(this).find('a').click();
});

イベント シミュレーションのデモで tabindex を使用するを参照してください。

最上位のアンカーにアクションがない (ドロップダウン目的でのみ使用される) 場合、これは問題ではありません。その場合、アンカーはまったく必要ありません。

于 2013-09-19T19:56:16.883 に答える