質問編集履歴

1 タイトル修正及び初心者まーく追加

marian

marian score 9

2018/04/20 15:51  投稿

ドロップダウンメニューでメニューからフォーカスが外れた時に第2階層のメニューを非表示にする方法
ドロップダウンメニューで第2階層の最後のliにフォーカスがある時にShift+Tabキーを押すと第2階層のメニューが非表示になってしまう
### 前提・実現したいこと
ドロップダウンメニューでキーボード移動(Tabキー及びShift+Tabキー)した時、
第2階層を持ったliもしくは第2階層からフォーカスが外れた時、
第2階層のメニューが非表示になるよう
(第2階層を持ったliもしくは第2階層にフォーカスがある時には第2階層のメニューは表示)
にするには記述をどのように修正したらよいでしょうか?
### 発生している問題
第2階層の一番最後のliにフォーカスがある時にShift+Tabキーを押すと
第2階層のメニューが非表示になってしまいます。
### 該当のソースコード
```HTML
<ul>
<li><a href="#">hoge1</a></li>
<li><a href="#" aria-haspopup="true">hoge2</a>
<ul aria-label="submenu" aria-hidden="true">
<li><a href="#">fuga1</a></li>
<li><a href="#">fuga2</a></li>
<li><a href="#">fuga3</a></li>
</ul>
</li>
<li><a href="#">hoge3</a>
</ul>
```
```JavaScript
$('[aria-haspopup]').on('focus', function(e) {
var submenu = $(this).next();
showSubmenu(submenu);
$(submenu).find('li').focus();
return false;
});
$('[aria-hidden] li:last-child').focusout(function(e) {
hideSubmenu($('[aria-label="submenu"]'));
});
$('[aria-haspopup]').on('keydown', function(e) {
if (e.keyCode === 9) {
if (e.shiftKey) {
hideSubmenu($('[aria-label="submenu"]'));
}
}
});
```
  • JavaScript

    25231 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    9853 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る