Bootstrap navbar collapse menu not working with Turbolinks

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.