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

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

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

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

Q&A

解決済

1回答

1826閲覧

子要素からフォーカスが外れた場合の処理をしたい

cofcof

総合スコア37

jQuery

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

0グッド

1クリップ

投稿2021/12/21 12:28

jQueryでプルダウンメニューを作成しています。
タブキーで操作した場合に子要素からフォーカスが外れた場合にプルダウンを閉じたいのですが上手くいきません。
下記の例で言うと、タブキーでメニュー2にフォーカスが移動した場合、どのようにしたらメニュー1の下層メニューを閉じられるでしょうか。
スクリプト最後のifのfocusinのあたりがおかしいと思うのですが、正しい書き方がわかりません。
なおプルダウンが閉じている場合にはフォーカスが当たらないようにtabindexもコントロールしています。
まだスクリプト全般に不慣れなので冗長なコードになっていて申し訳ありません。
アドバイスよろしくお願いいたします。

HTML

1<nav> 2<ul> 3 <li> 4 <p class="accordion" tabindex="1">メニュー1</p> 5 <ul class="lower"> 6 <li><a href="#" tabindex="2">下層メニュー</a></li> 7 <li><a href="#" tabindex="3">下層メニュー</a></li> 8 </ul> 9 </li> 10 <li> 11 <p class="accordion" tabindex="4">メニュー2</p> 12 <ul class="lower"> 13 <li><a href="#" tabindex="5">下層メニュー</a></li> 14 <li><a href="#" tabindex="6">下層メニュー</a></li> 15 </ul> 16 </li> 17</ul> 18</nav>

CSS

1.accordion { 2 height: 40px; 3 position: relative; 4 z-index: 1; 5 transition: 0.3s ease-out; 6 cursor: pointer; 7} 8li ul { 9 position: absolute; 10 top: 0; 11 left: 0; 12 width: 100%; 13 transition: 0.3s ease-in; 14 z-index: -1; 15} 16li ul li { 17 height: 0; 18 overflow-y: hidden; 19 transition: 0.3s ease-in; 20} 21.accordion.open + ul { 22 top: 40px; 23} 24.accordion.open + ul li { 25 height: 40px; 26 overflow-y: visible; 27}

jQuery

1$('nav').on('keypress', '.accordion', function(e){ 2 if(e.which == 13){ 3 $ac = $('.open'); 4 $ac.not(this).each(function(){ 5 $ac.removeClass('open'); 6 $(this).next().find('[tabindex]').each(function(){ 7 $tab = $(this).attr('tabindex'); 8 $tab = $tab * -1; 9 $(this).attr('tabindex',$tab); 10 }); 11 }); 12 if($(this).hasClass('open')) { 13 $(this).removeClass('open'); 14 $(this).next().find('[tabindex]').each(function(){ 15 $tab = $(this).attr('tabindex'); 16 $tab = $tab * -1; 17 $(this).attr('tabindex',$tab); 18 }); 19 } else { 20 $(this).addClass("open"); 21 $(this).next().find('[tabindex]').each(function(){ 22 $tab = $(this).attr('tabindex'); 23 $tab = $tab * -1; 24 $(this).attr('tabindex',$tab); 25 }); 26 } 27 } 28}); 29 30$('nav').on('click', '.accordion', function(){ 31 $ac = $('.open'); 32 $ac.not(this).each(function(){ 33 $ac.removeClass('open'); 34 $(this).next().find('[tabindex]').each(function(){ 35 $tab = $(this).attr('tabindex'); 36 $tab = $tab * -1; 37 $(this).attr('tabindex',$tab); 38 }); 39 }); 40 if($(this).hasClass('open')) { 41 $(this).removeClass('open'); 42 $(this).next().find('[tabindex]').each(function(){ 43 $tab = $(this).attr('tabindex'); 44 $tab = $tab * -1; 45 $(this).attr('tabindex',$tab); 46 }); 47 } else { 48 $(this).addClass("open"); 49 $(this).next().find('[tabindex]').each(function(){ 50 $tab = $(this).attr('tabindex'); 51 $tab = $tab * -1; 52 $(this).attr('tabindex',$tab); 53 }); 54 } 55}); 56 57$('.lower').on('focusout', function(){ 58 if(!$(this).focusin()) { 59 $(this).prev('accordion').removeClass('open'); 60 } 61});

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。
一応他の方のために書いておきます。
最後の5行の$('.lower').on('focusout〜の部分を以下に書き換えました。
ついでに繰り返し出てきていた部分に関数を適用することもできました。

もし他によりよい解決方法などありましたら教えてください。

jQuery

1$('nav').on('focus', '.accordion', function(){ 2 $('.accordion').not(this).each(function(){ 3 if($(this).hasClass('open')) { 4 $(this).removeClass('open'); 5 tabctrl(this); 6 } 7 }); 8}); 9function tabctrl($tg) { 10 $($tg).next().find('[tabindex]').each(function(){ 11 $tab = $(this).attr('tabindex'); 12 $tab = $tab * -1; 13 $(this).attr('tabindex',$tab); 14 }); 15} 16

投稿2021/12/21 15:01

cofcof

総合スコア37

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問