在 Rails 5 中使用 jQuery答案

【问题标题】：Working with jQuery in Rails 5在 Rails 5 中使用 jQuery
【发布时间】：2016-09-15 18:49:14
【问题描述】：

我写了一个简单的 jQuery 函数来控制移动导航栏的点击事件。但是，我似乎无法让它正常工作。每当我点击导航栏时，我可以看到菜单显示半秒然后消失。我在网上做了一些研究，看起来这与 Rails 5 turbolinks 有关。由于我对 Rails 和 jQuery 很陌生，所以我不太确定如何解决这个问题。

下面是我在 application.js 文件中的 jquery 代码。

$(document).ready(function(){

    $("#mobile").on("click", function(){

      $(".mobile_nav").toggleClass("open");

    });
});

这里是 HTML

<nav class="mobile_nav">
  <%= link_to"Blog", posts_path %>
  <%= link_to"About", about_path %>
  <%= link_to"Contact", new_contact_path %>
  <% if user_signed_in? %>
    <%= link_to "Sign Out", destroy_user_session_path, method: :delete %>
  <% end %>
</nav>

CSS

@media only screen and (max-width: 480px) {

  .mobile_nav {
    display: none;
  }
  .mobile_nav.open {
    display: block;
  }

【问题讨论】：

您可以尝试将您的 CSS 修改为：.mobile_nav.open，即删除.mobile_nav 和.open 之间的空格
哦，是的，这是一个错误，我已修复它。但它仍然不能解决问题

标签： jquery ruby-on-rails

【解决方案1】：

您应该尝试以下操作，而不是将您的 js 函数包装在 document.ready 调用中，因为 turbolinks 不会重新渲染整个页面，而是尝试像部分页面加载一样操作：

$( document ).on('turbolinks:load', function() {
   $("#mobile").on("click", function(){
      $(".mobile_nav").toggleClass("open");
   });
})

页面加载时的 turbolink 是每次更改视图时都会触发的内容。

【讨论】：