2016-08-10 63 views
0

我有一個響應下拉菜單,通過jQuery在我的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> 

我的jQuery中的application.js:

$(document).ready(function() { 

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

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

}); 

它位於應用程序/資產/ JavaScript的,在application.html頭部鏈接.erb等:

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

感謝您的時間。

回答

1

通過它的聲音,這是一個turbolinks問題。取決於您的鋼軌版本,請將其包裝在下面。

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); 
+0

謝謝,羅佩尼。這很好地解決了問題。 –

0

嘗試之前禁用默認點擊事件:

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