[英]jQuery drop down menu not toggling on page reload
我在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>
我在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' %>
谢谢你的时间。
听起来,这是一个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);
尝试禁用默认的click事件,然后再执行以下操作:
$('.hamburger').on('click', function(evt) {
evt.preventDefault();
$('.menu').slideToggle('slow');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.