ruby-on-rails-4 - español - instalar bootstrap en ruby on rails

El menú de contracción de la barra de navegación Bootstrap no funciona con Turbolinks

Question

El menú de colapso de la barra de navegación Bootstrap no funciona con Turbolinks.

Escenario de trabajo

1. En la carga de la página

   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   <div class="navbar-collapse collapse" id="menu"> </div>

2. Haga clic en menú y menú desplegable

   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   <div class="navbar-collapse in" id="menu" style="height: auto;"> </div>

3. Haga clic en el menú otra vez y colapsar

   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   <div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div>

No funciona (después de navegar a cualquier página)

1. En la carga de la página

   the same html, no need to repeat

2. Haga clic en menú y menú desplegable

   the same html, no need to repeat

3. Haga clic en el menú otra vez y colapsar

   3.1. Cambio transitorio observado en el depurador

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
   
       <div class="navbar-collapsing" id="menu" style="height: 96px;"> </div>

   Nota: class = "navbar-collapsing" y altura: 96px;

   3.2. Y luego vuelve al mismo estado

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button>
       <div class="navbar-collapse in" id="menu" style="height: auto;"> </div>

   Nota: Mismo html que en el paso 2.

Versiones de Libs:

• Turbolinks 2.1.0
• JQuery 2.0.3
• Bootstrap 3.0.3

Espero que alguien pueda encontrar una respuesta real o una explicación.

Answer 1

Dirty Solution será poner lo siguiente en tu application.js

  $(document).on("page:change", function() {
     $(".navbar .dropdown").hover((function() {
         $(this).find(".dropdown-menu").first().stop(true, true).delay(150).slideDown();
    }), function() {
         $(this).find(".dropdown-menu").first().stop(true, true).delay(50).slideUp();
    });
  });

Tenga en cuenta que es change no load

Answer 2

El responsable aquí es Turbolinks. Y la solución alternativa es no cargar el JavaScript de Turbolinks.

En el archivo

app/assets/javascripts/application.js

Eliminar esta línea

//= require turbolinks

Answer 3

Otra solución

Hacer elemento permanente. Con jQuery abra o cierre el menú desplegable.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="button-dropdown" data-turbolinks-permanent> Button</button>

Doc de Turbolinks https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads