Rails5 で Boostrap4 で、hover した時にドロップダウンメニューを開く

Published: 2019-04-26

やったこと

Rails5 で jQuery を利用できるようにしました。

確認環境

$ ruby --version
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin17]

$ rails --version
Rails 5.2.3

実施

下記で

'jquery-rails'

Gemfile の更新

//= require jquery3
//= require popper
//= require bootstrap-sprockets

※ もし反映されない時はサーバーを再起動などしてみてください（もちろん開発環境で）

view ファイルにドロップダウンメニューを追加します

hover した時にメニューを開くようにする css も追加しています。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
    type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<!-- hover で開くようにする -->
<style>
.dropdown:hover > .dropdown-menu {
  display: block;
}
</style>

クリックイベントの削除

hover した後にクリックすると、メニューが横に少しずれます。それを防ぐには下記の js を追加してください。

※ クリックイベントを削除しています。簡略化のため、全部クリックイベントを切っているので注意してください。

<script>
$(document).off("click");
</script>

参考

Dropdowns · Bootstrap