スマホ:プルダウンメニュー領域外をタップして閉じる
ここに質問の内容を詳しく書いてください。
レスポンシブデザインページにプルダウンメニューを実装しております。
PC向けは動作に問題ないのですが、スマホ向けの動作に悩んでおります。
問題点
・左メニュー(.left_box)、右メニュー(.right_box)と2つのメニュ−があります
.right_boxタップ→領域外タップで閉じる→再度.right_boxタップをすると開かない
・.right_box→タップ・閉じる→left_boxタップ→開く
左右交互にやれば問題なく動作
同じ箇所を連続でやると動作しない
該当のソースコード
/*右メニュー閉じる*/ $(document).on('click touchstart', function(e) { if (!$(e.target).closest('.right_box').length) { $('.right_box').fadeOut(); } }); /*左メニュー閉じる*/ $(document).on('click touchstart', function(event) { if (!$(event.target).closest('#top-head').length) { $header.removeClass('open'); } });
<ul> <li><p class="left">左メニュー</p> <div class="left_box"> <p>あいうえお</p> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> </li> <li><p class="right">右メニュー</p> <div class="right_box"> <p>かきくけこ</p> <ul> <li>メニュー</li> <li>メニュー</li> </ul> </div> </li> </ul>
ul{ list-style:none; margin: 0 auto; padding: 2% 0 3%; width: 62.5rem; clear:both; } ul > li{ width: 49%; height: 60px; margin: 0; padding-bottom:2px; float:left; position:relative; } ul.oe_menu > li:last-child { float: right; } ul div.right_box { overflow: hidden; position:absolute; top: 0; right: 0; width: 1000px; background-color:#56809c; padding: 3% 4% 5%; display:none; } ul div.left_box { overflow: hidden; position:absolute; top: 0; left: 0; width: 1000px; background-color:#38576b; padding: 3% 4% 5%; display:none; }
基礎的な事で大変申し訳ありませんが
よろしくお願い致します。