はじめに

ドロップダウンを開いた時に、cssを変更する操作を動的に行いたい。
railsのアプリ環境で行う。

環境

No	項目	内容
1	OS	Mac
2	Ruby	2.6.3
3	rails	6.0.4
4	jquery-rails	4.5.0

実装

こちらの記事を参考にjsファイルを書いた。

jsファイル読み込み設定

全ページにjsファイルを読み込むように設定する。

app/javascript/packs/application.js

// app/javascript　を起点に記載
require ('user/dropdown')

jsファイルの設定

.dropdownクラスをクリックした時のイベントを起点に発火させる。
thisは.dropdownクラスを指す。

app/javascript/user/dropdown.js

$(function(){
  // dropodownクラスがついている要素をクリックした時
  $('.dropdown').on('click', function(){
      // dropdownクラスから見て.navbar-rightクラスが付いている親要素を.parentsで取得する
      // (『this』は.dropdownを指します。)
      // 【確認】.dropdownのクラス属性がdropdownとopen(ドロップダウンが開いている状態)であればtrueを出力
      console.log('dropdown open?', $(this).attr('class')=='dropdown open');
      // 【CSS変更】.dropdownを開閉するたびに「.open」が追加・削除されるため、それをトリガーに背景色を変える
      if( $(this).attr('class') == 'dropdown' ) {
        // .dropdownのクラス属性がdropdownのみであれば.navbar-rightを青くする
        $(this).parents('.navbar-right').css('background-color' ,'blue');
      } else {
      // .dropdownのクラス属性がdropdownのみでない(dropdownとopen)場合、.navbar-rightを赤くする
      $(this).parents('.navbar-right').css('background-color' ,'red');
      }
  });
});

【確認】.dropdownのクラス属性がdropdownとopen(ドロップダウンが開いている状態)であればtrueを出力
【CSS変更】.dropdownを開閉するたびに「.open」が追加・削除されるため、それをトリガーに背景色を変える

これを実装すると、次のようにjsファイルが反応してくれる。

・dropdown open?:false => background-color: blue
・dropdown open?:true => background-color: red

今回のHTMLファイルは下記のようになっている。

header.html.erb

<!-- .navbar-rightを親クラスとして背景色を変えた -->
<div class="navbar-right">    
        <div class="search">
          <%= render 'shared/post_search' %>
        </div>
        <ul class="nav navbar-nav">
          <li><%= link_to "ホーム",   root_path %></li>
          <li><%= link_to "人気記事",   posts_path %></li>
          <li><%= link_to "人気ユーザー",  users_path %></li>
          <!-- log_in or !log_in -->
          <% if logged_in? %>
<!-- .dropdownをクリックされた時のイベントをjsファイルに書いた(ここがthisにあたる) -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" id="js-tab" data-toggle="dropdown">
                アカウント <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "プロフィール", current_user %></li>
                <li><%= link_to "新規投稿", new_post_path %></li>
                <li><%= link_to "設定", edit_user_path(current_user) %></li>
                <li class="divider"></li>
                <li><%= link_to "ログアウト", logout_path, method: :delete %></li>
              </ul>
            </li>
          <% else %>
            <li><%= link_to "ログイン", login_path %></li>
          <% end %>
        </ul>
      </div>

おわりに

jQueryを用いて、クラスの変化をトリガーに、cssのプロパティを操作することができた。

【jQuery】ドロップダウンの開閉(クラスの変化)をトリガーにCSSの変更を動的に実装

はじめに

環境

実装

jsファイル読み込み設定

jsファイルの設定

おわりに