jqueryの特定要素以外のクリックについて

前提・実現したいこと

ボタンクリックでポップアップが出て、ボタンをもう一度クリックorボタン部分以外のクリックでポップアップが閉じる。

発生している問題・エラーメッセージ

ポップアップで出てくる中身をクリックしたときはポップアップを閉じないようにしたい

該当のソースコード

<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>popup</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <head> <style> * { margin: 0; padding: 0; list-style: none; } .wrap { width: 800px; margin: 0 auto; } img { width: 30px; } ul.inner { display: flex; } ul.inner li { margin: 5px; } .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .popup .popup_content { visibility: hidden; width: 160px; background-color: #ddd; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } .popup .popup_content::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #ddd transparent transparent transparent; } .popup .show { visibility: visible; } </style> </head> <body style="text-align:center"> <div class="wrap">

<ul style="margin-top: 150px;">
  <li class="popup popup_04">
   <span class="flag_name_create_btn" style="border: solid 1px;">フラグに名前を付ける</span>
    <span class="popup_content">
      <span class="flag_name_close_btn">×</span>
      <input type="text" style="width: 90%;">
      <span class="flag_name_save_btn" style="border: solid 1px;">保存</span>
    </span>
  </li>
</ul>

</div> <script> //popup_04表示 $(document).on('click', function(event) { if (!$(event.target).closest('.popup_04').length) { //popup_04以外をクリック if ($('.popup_04 .popup_content').hasClass('show')) { $('.popup_04 .popup_content').removeClass('show'); } } else { //popup_04をクリック $('.popup_04').children('.popup_content').toggleClass('show'); } }); </script> </body> </html>

試したこと

toggleClassをaddClassにしたがそうすると、ボタンのクリックで閉じなくなってしまう。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1  $(document).on('click',function(e){
2    if($(e.target).is('.flag_name_create_btn')){
3      $('.popup_04 .popup_content').toggleClass('show');
4    }else if($(e.target).closest('.popup_04').length==0){
5      $('.popup_04 .popup_content').removeClass('show');
6    }
7  });