jQuery 드롭 다운 메뉴가 페이지 새로 고침을 토글하지 않음

Question

레일스 앱에서 jQuery를 통해 움직이는 반응 형 드롭 다운 메뉴가 있지만 메뉴 링크 중 하나를 따라 가면 열린 위치에서 멈추는 경우가 있습니다. 링크를 따라갈 수는 있지만 메뉴는 열려 있습니다. application.js에서

<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.html.erb에서

application.html의 머리에 연결

$(document).ready(function() { 

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

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

}); 

그것은 응용 프로그램/자산/자바 스크립트에 위치하고, .erb as : such as :

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

감사합니다.

Answer 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); 

Answer 2

전에 기본 클릭 이벤트를 해제하려고합니다 : 그것의 소리에 의해

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