我的Rails应用程序中有一个通过jQuery动画的响应式下拉菜单,但是当我按照其中一个菜单链接时,它会卡在打开位置。我可以继续关注链接,但菜单仍然保持打开状态。
在我的application.html.erb中:
<header>
<button class="hamburger">☰</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>
我在app.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' %>
感谢您的时间。
答案 0 :(得分:1)
听起来,这是一个涡轮问题。根据您的导轨版本,将其包装在以下内容中。
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);
答案 1 :(得分:0)
尝试在以下情况之前禁用默认点击事件:
$('.hamburger').on('click', function(evt) {
evt.preventDefault();
$('.menu').slideToggle('slow');
});