クリックイベントを取り消す処理について

クリックしたらドロップダウンでメニューが出てくるのをjQueryで実装していたのですが、それを消すためのイベントについての話です。

右の▼または画像をクリックするとドロップダウンメニューが出てきて、その後どこかをクリックすると消える、という物です。

blurではできなかった。

ドロップダウンメニューが消えずにずっと残っていた。邪魔。

navbar.html.erb

          <li class="nav-item dropdown" id="nav-bar__dropdown">
            <%= link_to '#',class: "ml-2 tip-accoount",id:'nav-bar__account' do %>
              <%= image_tag 'sample-account.png',class: "navbar__profile-icon" %>
              <span class="caret">
                <%= icon('fas','caret-down') %>
              </span>
            <% end %>
            <div class="dropdown-menu dropdown-menu-right">
              <%= link_to '管理ページ','#' ,class:"dropdown-item ajax-link" %>
              <%= link_to 'ログアウト','#' ,class:"dropdown-item ajax-link" %>
            </div>
          </li>

navbar.js

  $("#nav-bar__dropdown").click(function(){
    $("#nav-bar__dropdown").children(".dropdown-menu").toggleClass("show");
  });
  $("#nav-bar__dropdown").blur(function(){
    $("#nav-bar__dropdown").children(".dropdown-menu").removeClass("show");
  });

#結論：blurではなくfocusoutを使う

blurではその要素自体にしか適用されないので、子要素に適用するにはfocusoutを使わないといけない、とのことです。

navbar.js

  $("#nav-bar__dropdown").click(function(){
    $("#nav-bar__dropdown").children(".dropdown-menu").toggleClass("show");
  });
  $("#nav-bar__dropdown").focusout(function(){
    $("#nav-bar__dropdown").children(".dropdown-menu").removeClass("show");
  });

#参考にした記事
https://developer.mozilla.org/ja/docs/Web/API/Element/blur_event