Bootstrap navigation bar nulling menu does not work with Turbolinks

Question

The navbar bootstrap bypass menu does not work with Turbolinks.

Working scenario

• Upload to page

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

• Click menu and drop down menu

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

• Click the 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> 

Doesn't work (after going to any page)

• Upload to page

   the same html, no need to repeat 

• Click menu and drop down menu

   the same html, no need to repeat 

• Click the menu again and collapse

  3.1. Transient Observation 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 = "popup" and height: 96px;

  3.2. And then return 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. The same HTML as in step 2.

Libs options:

• Turbolinks 2.1.0
• JQuery 2.0.3
• Bootstrap 3.0.3

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

Answer 1

Responsible here is Turbolinks. And the workaround is to not load javascript Turbolinks.

In file

app/assets/javascripts/application.js

Delete this line

//= require turbolinks

Answer 2

Dirty Solution will include the following in 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(); }); }); 

Remember this is change not load

Answer 3

Another solution.

Create a permanent item. Use jQuery to open or close the drop-down menu.

 <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