如何在Ruby on Rails中修复不显示任何项目的Navbar下拉菜单

Question

我刚刚开始开发一个带有导航栏的网页，该导航栏的右侧有一个下拉菜单，因此必须单击触发器以显示下拉内容，问题是没有显示任何内容项。

我在前端设计中使用了Materialize，但出于相同的Navbar目的，我也尝试了bootstrap，但它也没有显示项目

（应用程序/视图/布局/ 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>

（应用程序/资产/样式表/ application.scss）

 @import "materialize";

（应用程序/资产/ Javascript角/ application.js中）

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

（的Gemfile）

# materialize Sass 
gem 'materialize-sass'

# Jquery 
gem 'jquery-rails'

当我单击触发器以放置项目（在本例中为John Doe）时，

我在控制台上收到此错误：

       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