jQuery下拉菜单不切换页面重新加载答案

【问题标题】：jQuery drop down menu not toggling on page reloadjQuery下拉菜单不切换页面重新加载
【发布时间】：2016-08-10 11:31:33
【问题描述】：

我在我的 Rails 应用程序中有一个通过 jQuery 动画的响应式下拉菜单，但是当我点击其中一个菜单链接时，它卡在了打开位置。我可以继续关注链接，但菜单仍然打开。

在我的 application.html.erb 中：

 <header>
    <button class="hamburger">&#9776;</button>
  </header>

  <div class="menu">
    <ul>
    <% if current_user %>
      <li><%= image_tag @user.profile_picture.thumb.url, class: 'profile_thumb' %>  <span><%= current_user.email %></span></li>
    <% end %>
      <li><%= link_to "Home", root_path %></li>
      <li><%= link_to "Pledges", pledges_path %></li>
    <% if current_user %>
      <li><%= link_to "Edit Profile", edit_user_registration_path %></li>
      <li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
    <% else %>
      <li><%= link_to "Sign In", new_user_session_path %></li>
      <li><%= link_to "Register",  new_user_registration_path %></li>
    <% end %>
    </ul>
  </div>

我在 application.js 中的 jQuery：

$(document).ready(function() {

  $('.menu').hide();

  $('.hamburger').on('click', function() {
    $('.menu').slideToggle('slow'); 
  });

});

它位于 app/assets/javascripts 中，链接在 application.html.erb 的头部，如下所示：

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

感谢您的宝贵时间。

【问题讨论】：

标签： javascript jquery css ruby-on-rails

【解决方案1】：

听上去，这是一个 turbolinks 问题。根据您的 rails 版本，将其包装在以下内容中。

var ready = function() {

  $('.menu').hide();

  $('.hamburger').on('click', function() {
    $('.menu').slideToggle('slow'); 
  });

};

$(document).on('ready', ready);
// Rails 5 || Turbolinks 5
$(document).on('turbolinks:load', ready);
// Rails 4 || Turbolinks < 5
$(document).on('page:load', ready);

【讨论】：

谢谢，罗佩尼。这很好地解决了问题。

【解决方案2】：

尝试禁用之前的默认点击事件：

 $('.hamburger').on('click', function(evt) {
    evt.preventDefault();
    $('.menu').slideToggle('slow'); 
  });

【讨论】：