Question

我已经重新开始编码并且是rails和jQuery的新手。我最近在将移动导航迁移到垫片时遇到了问题。

我用来创建全屏覆盖的jQuery在我的主页上工作，但当我导航到后续静态页面时，相同的脚本不起作用，我收到以下错误：

Uncaught TypeError: $(...).fadeToggle is not a function

基本文件结构：

我的“主页”位于app/views/static_pages/home.html.erb，我提到的link_to页面也位于app/views/static_pages/donation.html.erb。

app/layouts/_header.html.erb中的导航如下所示：

<div class="brand">
  <%= link_to image_tag("logo.png",alt: "The Eric Scherbarth Leukemia Research Foundation Inc.", class: "logo"), "https://www.eslrf.org" %>
</div>
<nav id="main-nav">
  <%= link_to "Home", root_path, :class => "nav-item"%>
  <%= link_to "Eric's Story", '#', :class => "nav-item"%>
  <%= link_to "Our Mission", '#', :class => "nav-item"%>
  <%= link_to "Events", '#', :class => "nav-item"%>
  <%= link_to "Contact Us", '#', :class => "nav-item"%>
  <%= link_to "Donate Now", donations_path, :class => "donate-btn" %>
</nav>
<div class="responsive-btn">
  <a href="#" class="btn-open"></a>
</div>

<!-- Mobile and Responsive Navigation Overlay -->
<div class="overlay">
<div class="overlay-wrapper">
  <nav class="responsive-nav">
    <%= link_to "Home", root_path, :class => "responsive-nav-item" %>
    <%= link_to "Eric's Story", '#', :class => "responsive-nav-item"%>
    <%= link_to "Our Mission", '#', :class => "responsive-nav-item"%>
    <%= link_to "Events", '#', :class => "responsive-nav-item"%>
    <%= link_to "Contact Us", '#', :class => "responsive-nav-item"%>
    <div class="btn-container">
      <%= link_to "Donate Now", donations_path, method: :get, :class => "responsive-donate-btn" %>
    </div>
  </nav>
  <div class="social">
      <div class="social-icon">
        <a href="https://www.facebook.com"><i class="fa fa-facebook"></i></a>
      </div>
      <div class="social-icon">
        <a href="https://www.instagram.com"><i class="fa fa-instagram"></i></a>
      </div>
      <div class="social-icon">
        <a href="https://www.twitter.com"><i class="fa fa-twitter"></i></a>
      </div>
      <div class="social-icon">
        <a href="#"><i class="fa fa-envelope-o"></i></a>
      </div>
  </div>
</div>
</div>

Jquery脚本如下所示：

$(document).ready(function(){
    $(".responsive-btn a").click(function(){
          $(".overlay").fadeToggle(200);
        $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
    $('.overlay').on('click', function(){
        $(".overlay").fadeToggle(200);
        $(".responsive-btn a").toggleClass('btn-open').toggleClass('btn-close');
        open = false;
    });
});

我已经禁用了turbolinks，因为我遇到了使用turbolinks激活的脚本问题。

非常感谢任何帮助！

Answer 1

这是一个老问题，但是我今天也遇到了同样的问题。在我的情况下，这是由于将“标准” jquery替换为“ slim”版本，又将其交换回固定了它。在此处发布以供参考。

JQuery Uncaught TypeError：$（...）。fadeToggle不是函数

1 个答案: