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

问题描述

我在移动设备 (Bootstrap 2) 上的 Bootstrap 菜单下拉菜单中出现问题。有一个类似的问题是 here 有下拉式按钮，但是这个答案是引导程序中的一个固有的错误，在更新中解决了。我似乎有同样的问题，所以也许是因为我的标记？

我有一个可折叠的导航栏与下拉列表，一切都在桌面浏览器上完美地工作。但是，在移动设备上，当您点击下拉列表时，下拉列表将会打开，但点击任何下拉链接将只会将下拉列表重新上传 – 无法连接。我已经尝试过各种引导版本，无法纠正这一点，所以我只能想象它是我的标记。这里是：

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

任何帮助将不胜感激。

最佳解决方法

在您的最小化的 bootstrap.min.js 文件中，找到子字符串

"ontouchstart"

并替换它

"disable-ontouchstart"

看看这个类似的 SO 问题：Bootstrap Collapsed Menu Links Not Working on Mobile Devices

次佳解决方法

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

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

第三种解决方法

我正在使用 BootStrap 3.1.1 。我已经尝试了许多答案，下载菜单在 Android 设备上工作正常，但在 iOS 设备上仍然无法使用。最后我发现问题的根本原因。

iPhone 上的 safari 只支持<a> 和<input> 元素的点击事件。见这段经文 Click event delegation on the iPhone 。

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

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

第四种方法

我解决了同样的问题：

打开你的 js/bootstrap-dropdown.js 或它的最小版本。

2. 找到以下行或地点：touchstart.dropdown.data-api

应该只有 4 次发生。这样的事情

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

你应该在第二和第三次发生之间插入这条新线：

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

你的新闻片段必须是这样的：

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

在 Bootstrap.js 的最小化版本上要小心，所以您必须将新行连接到其上的确切位置。

祝你好运！ 🙂

第五种方法

我推荐下载最新的 Bootstrap 文件，并使用新版本替换服务器上的 bootstrap.js 和 bootstrap.min.js 。

这解决了我的问题。

第六种方法

我从 bootstrap git-hub 论坛找到了解决方案。您需要在脚本中仅包含一行代码准备好，

$(‘body’).on(‘touchstart.dropdown’，’.dropdown-menu’，function(e){e.stopPropagation();});

它为我工作！

第七种方法

这似乎没有任何问题。 “open” 类已经存在引导，应该工作，但由于某种原因，它不是。此代码强制它相应地运行。 🙂

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });

参考文献

Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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