Bootstrap v2下拉导航无法在移动浏览器上运行

Question

我在移动设备(Bootstrap 2)上的Bootstrap菜单下拉列表出现问题.这里有一个类似的问题,带有下拉按钮,但是答案就是引导程序中的一个固有错误,它在更新中得到了解决.我似乎有同样的问题所以也许这取决于我的标记？

我有一个带有下拉菜单的可折叠导航栏,一切都在桌面浏览器上完美运行.但是,在移动设备上,当您点击下拉列表时,下拉菜单会打开,但点击任何下拉链接只会再次折叠下拉菜单 - 无法访问链接.我尝试了各种bootstrap版本,无法纠正这个问题,所以我只能想象它是我的标记.这里是:

 <header class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#"><h1>Branding</h1></a>
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">Menu Item 1</a></li>
                    <li class="dropdown">                    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>      
                        <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Item 1</a></li>
                            <li><a href="#">Dropdown Item 2</a></li>
                            <li><a href="#">Dropdown Item 3</a></li>  
                            <li><a href="#">Dropdown Item 4</a></li>                           
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</header>

这是一个复制代码的例子(抱歉,无法发送网站):http://jsfiddle.net/yDjw8/1/

(问题只能在移动设备上看到/复制 - 我正在使用iOS)

任何帮助将非常感激.

Answer 1

在缩小的bootstrap.min.js文件中,找到子字符串

"ontouchstart"

并替换它

"disable-ontouchstart"

看看这个类似的问题: Bootstrap折叠菜单链接不适用于移动设备

Answer 2

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

在我建造的两个独立的导航系统上工作.

Answer 3

我正在使用BootStrap 3.1.1.我已经尝试了很多答案,下拉菜单在Android设备上运行正常,但仍然无法在iOS设备上运行.最后我找到问题的根本原因.

iPhone上的safari仅支持click事件<a>和<input>元素.在iPhone上查看此段落点击事件委托.

所以我们需要添加自定义点击委派.以下代码将解决问题.

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});