質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Q&A

2回答

1706閲覧

Jqueryドロップダウンメニューのサブメニューにタブキーでフォーカスさせたい

defg

総合スコア11

jQuery

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

0グッド

1クリップ

投稿2019/03/04 10:51

前提・実現したいこと

Jqueryでドロップダウンメニューを作成しております。
タブキーでサブメニューを開きリンク要素にフォーカスをさせたいです。

発生している問題

タブキーでフォーカス移動していくとサブメニューが開きません。

該当のソースコード

jquey

1$(function () { 2 $('li.drop a').click(function () { 3 if ($(this).attr('class') == 'active') { 4 // サブメニュー非表示 5 $(this).removeClass('active').next('.sub').slideUp(); 6 } else { 7 // 表示しているサブメニューを閉じる 8 $('li.drop a').removeClass('active'); 9 $('.sub').hide(); 10 11 // サブメニュー表示 12 $(this).addClass('active').next('.sub').slideDown(); 13 } 14 }); 15 16 // マウスカーソルがメニュー上/メニュー外 17 $('li.drop a,.sub').hover(function () { 18 over_flg = true; 19 }, function () { 20 over_flg = false; 21 }); 22 23 // メニュー領域外をクリックしたらメニューを閉じる 24 $('body').click(function () { 25 if (over_flg == false) { 26 $('li.drop a').removeClass('active'); 27 $('.sub').slideUp(); 28 } 29 }); 30});

html

1<ul class="lnav-list"> 2 <li class="drop"><a tabindex="0">メインメニュー1</a> 3 <ul class="sub"> 4 <li><a href="#" tabindex="0">サブメニュー</a></li> 5 <li><a href="#" tabindex="0">サブメニュー</a></li> 6 </ul> 7 </li> 8 <li class="drop"><a tabindex="0">メインメニュー2</a> 9 <ul class="sub"> 10 <li><a href="#" tabindex="0">サブメニュー</a></li> 11 <li><a href="#" tabindex="0">サブメニュー</a></li> 12 </ul> 13 </li> 14 <li class="drop"><a tabindex="0">メインメニュー3</a> 15 <ul class="sub"> 16 <li><a href="#" tabindex="0">サブメニュー</a></li> 17 <li><a href="#" tabindex="0">サブメニュー</a></li> 18 </ul> 19 </li> 20</ul>

試したこと

$('li.drop a').click(function ()

$('li.drop a').foucusin(function ()
にしてみましたが一瞬サブメニューが開くもののすぐに閉じてしまいます。そして今度はクリックがまったく機能しません。

素人同然の質問で大変恐縮ですが、切羽詰まっており困っております。
ご指導のほど何卒よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

こういうことですか?

javascript

1<script> 2$(function () { 3 $('.lnav-list .sub').hide(); 4 $('.lnav-list .drop>a').on('focus',function(){ 5 $(this).siblings('.sub').slideDown(); 6 $(this).closest('.drop').siblings().find('ul').slideUp(); 7 }); 8}); 9</script> 10<ul class="lnav-list"> 11 <li class="drop"><a tabindex="0">メインメニュー1</a> 12 <ul class="sub"> 13 <li><a href="#">サブメニュー</a></li> 14 <li><a href="#">サブメニュー</a></li> 15 </ul> 16 </li> 17 <li class="drop"><a tabindex="0">メインメニュー2</a> 18 <ul class="sub"> 19 <li><a href="#">サブメニュー</a></li> 20 <li><a href="#">サブメニュー</a></li> 21 </ul> 22 </li> 23 <li class="drop"><a tabindex="0">メインメニュー3</a> 24 <ul class="sub"> 25 <li><a href="#">サブメニュー</a></li> 26 <li><a href="#">サブメニュー</a></li> 27 </ul> 28 </li> 29</ul>

調整

javascript

1$(function () { 2 $('.lnav-list .sub').hide(); 3 $('.lnav-list .drop>a').on('focus click',function(){ 4 $(this).siblings('.sub').slideToggle(); 5 $(this).closest('.drop').siblings().find('ul').slideUp(); 6 }); 7});

投稿2019/03/05 01:42

編集2019/03/05 05:09
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defg

2019/03/05 01:51

ありがとうございます。かなり近づいているのですが、すみません、、、ドロップダウンはクリックで開閉したいのです。言葉足らずで申し訳ありません。
yambejp

2019/03/05 02:16 編集

「タブキーでフォーカス移動していくとサブメニューが開きません。」 とありますが、フォーカスでは開かないのですね? (focusをclickにして追記しておきました)
defg

2019/03/05 05:02

yambejpさん ありがとうございます。 すみません。せっかくご指導頂きましたが実現したい事について基本的な説明が全く足りておりませんでした。 実現したいことは以下になります。 1)<li class="drop"><a>をクリックで下層の.subを開閉したい。 例)メインメニュー1を一度クリックすると.subがスライドダウンして、もう一度メインメニュー1をクリックすると.subがスライドアップする。 2)タブキーで「tabindex="0"」要素にフォーカスさせたい。 例)メインメニュー1にフォーカスすると「.sub」がスライドダウン(スライドしなくても可)され、順に「.sub」内の「tabindex="0"」にフォーカスされる。 メインメニュー2にフォーカスすると「.sub」がスライドダウン…といった具合に。 つまりマウスを使った1)の動作を、アクセシビリティの観点でタブキーで実現できないかという事でした。
yambejp

2019/03/05 05:10

調整版あげました、動作が違う場合はご指摘ください
yambejp

2019/03/05 05:10 編集

かぶった・・・
guest

0

js

1 $('li.drop a').on('click focus', function () {

みたいな感じですか?

投稿2019/03/05 00:49

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defg

2019/03/05 01:02

ありがとうございます。タブキーでサブメニューをオープンさせることはできましたが、サブメニューへのフォーカスができませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問