Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

Question

I am having an issue with the Bootstrap menu dropdowns on mobile devices (Bootstrap 2). A similar question was asked here with dropdown buttons, however the answer for that

Answer 1

Found this fix for version 2.3.2:

<script>
jQuery(document).ready(function($)  {
$("li.dropdown a").click(function(e){
    $(this).next('ul.dropdown-menu').css("display", "block");
    e.stopPropagation();
  });
}); </script>     

Worked on two separate nav systems I built.

Answer 2

When you click on the dropdown, it adds the open class to your <li class="dropdown"> giving you: <li class="dropdown open">. When you click a link on the dropdown menu or the 'Menu item 2 (dropdown)', the open class is removed causing the dropmenu to fold up again.

The below fiddle shows how to stop the click event from propagating, but may cause you issues else where. Also, I only prevented the propagation on item #1 in the dropdown. You can use jQuery to have this happen on all items of the dropdown.

JS Fiddle: http://jsfiddle.net/yDjw8/2/