Why doesn't Bootstrap button dropdown work on

问题:

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?

回答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)

回答2:

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

<div class="container">
  <div class="btn-group lt category_bg">
    <p>Adults</p>
    <button class="btn btn-large" data-toggle="dropdown"><cite>0</cite> <span class="caret"></span></button>
    <ul class="dropdown-menu ">
      <li id='adult_0' onClick="flight_user(this.id)"><a href="#" >0</a></li>
      <li id='adult_1' onClick="flight_user(this.id)"><a href="#" >1</a></li>
      <li id='adult_2' onClick="flight_user(this.id)"><a href="#" >2</a> </li>
      <li id='adult_3' onClick="flight_user(this.id)"><a href="#">3</a></li>
      <li id='adult_4' onClick="flight_user(this.id)"><a href="#">4</a></li>
    </ul>
  </div>

</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>


 <script>
    function flight_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

回答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 {
                return false;
            }
       });