JavaScript、jQueryで、対象のボタン以外をクリックしたことを判定したいです。
宜しくお願い致します。
###前提・実現したいこと
下記3つの機能を実現したいです。(文末に補足して4つにしました)
➀ボタンクリックでメニュー表示
➁もう一度クリックでメニュー非表示
➂ボタン以外のクリックでメニュー非表示
###発生している問題・エラーメッセージ
上の3つのうち1つずつは実現できました。
ですが3つを組み合わせると実現できません。
エラーはありません。
###試したこと
こちらがその表示切替コードになります。
それぞれは動くのですが、どこを直せば➀➁➂がすべて動くようになりますでしょうか?
html
1<p>こんにちは</p> 2<div class="E"> 3 <button type="button">メニュー</button> 4</div> 5 6<p>こんばんは</p> 7<div class="E"> 8 <button type="button">メニュー</button> 9</div>
jQuery
1// メニュー 2var menus = ` 3 <ul class="menus"> 4 <li>たべる</li> 5 <li>さわる</li> 6 </ul> 7`; 8 9// ➀ボタンクリックでメニュー表示 10$(document).on('click','.E > button:not(.is_click)', function(){ 11 $(this).addClass('is_click'); 12 $(this).after(menus); 13}); 14 15// ➁もう一度クリックでメニュー非表示 16$(document).on('click','.E > button.is_click', function(){ 17 $(this).removeClass('is_click'); 18 $(this).next('.menus').remove(); 19}); 20 21// ➂ボタン以外のクリックでメニュー非表示 22$(document).on('click',function(e) { 23 if(!$(e.target).closest('.E > button:not(.is_click)').length) { 24 $('.E > button').removeClass('is_click'); 25 $('.menus').remove(); 26 } 27}); 28 29
###補足
すみません、補足です。
➃複数のメニューが同時に表示されることは避けたい。
たとえば「こんにちは」のメニューを開いてる最中に、「こんばんは」のメニューを開いたら、「こんばんは」のメニューだけを表示できればと思っています。
回答4件
あなたの回答
tips
プレビュー