クリックしたらドロップダウンでメニューが出てくるのを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");
});