Bootstrap navbar collapse menu not working with Turbolinks

Question

Bootstrap navbar collapse menu not working with Turbolinks.

Working scenario

1. On page load

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

2. Click menu and dropdown

   <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. Click menu again and collapse

   <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>
   

Not working (after navigating to any page)

1. On page load

   the same html, no need to repeat
   

2. Click menu and dropdown

   the same html, no need to repeat
   

3. Click menu again and collapse

   3.1. Transient change observed in the debugger

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

   Note: class="navbar-collapsing" and height: 96px;

   3.2. And then go back to the same state

       <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>
   

   Note: Same html as in step 2.

Libs versions:

• Turbolinks 2.1.0
• JQuery 2.0.3
• Bootstrap 3.0.3

I hope someone can come up with a real answer or an explanation.

Answer 1

The responsible here is Turbolinks. And the workaround is to not load the Turbolinks javascript.

In the file

app/assets/javascripts/application.js

Delete this line

//= require turbolinks

Answer 2

Dirty Solution will be to put the following in your 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();
    });
  });

Mind that it is change not load

Answer 3

Other solution.

Making permanent element. With jQuery open or close the dropdown.

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

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