问如何修复Ruby on Rails中未显示任何项目的导航栏下拉菜单

EN

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

<!-- Dropdown Structure -->

<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">My Profile</a></li>
  ... 
</ul>

<ul id="dropdown2" class="dropdown-content">
  <li><a href="#!">My Profile</a></li>
  ...
</ul>

<nav class="brown lighten-4 z-depth-z">
<div class="container">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>

    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons"></i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Courses</a></li>
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Login</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">John Doe<i class="material-icons right"></i></a></li>  
    </ul>

    <ul class="sidenav" id="mobile-demo">
      <li><a href="#">Courses</a></li>
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Login</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">John Doe<i class="material-icons right"></i></a></li>  
    </ul>
  </div>    
</div>

<script>
  $('.sidenav').sidenav();
  $(".dropdown-trigger").dropdown();
</script>

 @import "materialize";

 //= require jquery
 //= require materialize-sprockets
 //= require turbolinks
 //= require_tree .

# materialize Sass 
gem 'materialize-sass'

# Jquery 
gem 'jquery-rails'

       Uncaught ReferenceError: $ is not defined
at <anonymous>:2:5
at o.assignNewBody (turbolinks.js:604)
at o.replaceBody (turbolinks.js:542)
at turbolinks.js:535
at o.e.renderView (turbolinks.js:495)
at o.render (turbolinks.js:533)
at Function.e.render (turbolinks.js:493)
at t.renderSnapshot (turbolinks.js:690)
at t.render (turbolinks.js:686)
at r.render (turbolinks.js:940)