How can I fix a Navbar drop-down menu in Ruby on Rails that does not show any of the items

Question

I've just started developing a webpage with a Navbar that has a drop-down menu to the right so as one has to click on the trigger to display the drop-down content, the problem is none of the content items is been displayed.

I'm using materialize for the front-end design, but I have also tried bootstrap for the same Navbar purpose but it also didn't display the items

(app/views/layouts/application.html.erb)

<%= 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>

(app/assets/stylesheets/application.scss)

 @import "materialize";

(app/assets/javascripts/application.js)

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

(Gemfile)

# materialize Sass 
gem 'materialize-sass'

# Jquery 
gem 'jquery-rails'

When I click the trigger to drop the items(in this case John Doe),

I get this error on the console:

       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)

Answer 1

就像jquery-rails的文档所说，如果您使用的是Rails 5.1+，我相信您需要在需要jquery之前添加以下代码：

//= require rails-ujs