Why Doesn't Bootstrap Button Dropdown Work On Ios?

It looks like even the bootstrap demo here doesn't work on iOS. You don't seem to be able to select an item from it on iPhone or iPad. Is there a fix for this?

Solution 1:

There is a quick fix as noted in many of the issue comments on github: https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606

add this script just before your close html tag:

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
    e.stopPropagation(); 
});

I have tested the above method on both ios5 and 6. It works like a charm

---

If you wish to modify the bootstrap javascript you could, instead of the fix above, remove touchstart.dropdown.data-api from the html binding for clearMenus near the bottom of the file.

just change this

$('html')
  .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)

to this

$('html')
  .on('click.dropdown.data-api', clearMenus)

Solution 2:

You need to add a customize jquery in your file.If you want to use that then use:

<divclass="container"><divclass="btn-group lt category_bg"><p>Adults</p><buttonclass="btn btn-large"data-toggle="dropdown"><cite>0</cite><spanclass="caret"></span></button><ulclass="dropdown-menu "><liid='adult_0'onClick="flight_user(this.id)"><ahref="#" >0</a></li><liid='adult_1'onClick="flight_user(this.id)"><ahref="#" >1</a></li><liid='adult_2'onClick="flight_user(this.id)"><ahref="#" >2</a></li><liid='adult_3'onClick="flight_user(this.id)"><ahref="#">3</a></li><liid='adult_4'onClick="flight_user(this.id)"><ahref="#">4</a></li></ul></div></div><scriptsrc="js/jquery.js"></script><scriptsrc="js/bootstrap-dropdown.js"></script><script>functionflight_user(selected){
    var value = jQuery("#" + selected).find('a').text();
    jQuery("#" + selected).parent().parent().find('cite').html(value);
    }

</script>

I can give you live demo for this if you want

Solution 3:

This script solve this problem. Just add this code

$(document).on('click', 'a.your-drop-down-link', function(event){
            event.stopPropagation();
            event.preventDefault();
            if(event.handled !== true) {

                if ( $(this).parent().hasClass('open') ) {
                    $(this).parent().removeClass('open');
                }else{
                    $(this).parent().addClass('open');
                }

                event.handled = true;
            } else {
                returnfalse;
            }
       });