前提・実現したいこと
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 ()
にしてみましたが一瞬サブメニューが開くもののすぐに閉じてしまいます。そして今度はクリックがまったく機能しません。
素人同然の質問で大変恐縮ですが、切羽詰まっており困っております。
ご指導のほど何卒よろしくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/05 01:51
2019/03/05 02:16 編集
2019/03/05 05:02
2019/03/05 05:10
2019/03/05 05:10 編集