为什么不't在iOS上启动按钮下拉工作

Why doesn't Bootstrap button dropdown work on iOS?

本文关键字:按钮 启动 工作 iOS 为什么不      更新时间:2023-09-26

看起来这里的引导程序演示在iOS上也不起作用。您似乎无法在iPhone或iPad上从中选择项目。

有解决办法吗?

github上的许多问题评论中都提到了一个快速修复方法:https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606

在关闭html标签之前添加此脚本:

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

我已经在ios5和ios6上测试了上述方法。它就像一个魅力


如果你想修改引导程序javascript,你可以从文件底部附近的clearMenus的html绑定中删除touchstart.dropdown.data-api,而不是上面的修复程序。

只要更改这个

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

到这个

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

您需要在文件中添加一个自定义jquery。如果你想使用它,那么使用:

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

如果你想要

,我可以给你现场演示

这个脚本解决了这个问题。只需添加此代码

$(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;
            }
       });