Bootstrapのdropdownを利用する(Rails 5.1.2)

はじめに

Bootstrapを利用してるサイトのナビゲーションバーにdropdownを追加する際、設定の追加が必要だったのでメモしておきます。

環境
Rails 5.1.2
Bootstrap 3.3.6

設定前

自分の場合はナビーションバーにdropdownを追加したかったので_header.html.erbを下記のように修正しました。

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "xxx", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "xxx", xxx_path %></li>
        <li><%= link_to "xxx", xxx_path %></li>
        <li><%= link_to "xxx", xxx_path %></li>

        <!- 追記箇所ここから -->

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">header</li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
          </ul>
        </li>

        <!- 追記箇所ここまで -->

      </ul>
    </nav>
  </div>
</header>

ご参考までに、この時点の各ファイルの設定内容は下記の通りです。

Gemfile

gem 'bootstrap-sass', '3.3.6'

app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

app/assets/javascripts/application.js

//= require rails-ujs
//= require turbolinks
//= require_tree .

この時点でナビゲーションバーのdropdownをクリックしてもメニューが表示されませんでした。

設定後

Gemfileにgem 'jquery-rails'を追記しました。

Gemfile

gem 'bootstrap-sass', '3.3.6'
gem 'jquery-rails'

application.jsに//= require jqueryと//= require bootstrapを追記しました。

app/assets/javascripts/application.js

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require bootstrap
//= require_tree .

dropdownをクリックした際にメニューが表示されるようになりました。