Bootstrap v2下拉导航在移动浏览器上不工作 [英] Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

问题描述

我在移动设备上的Bootstrap菜单下拉列表中遇到问题（Bootstrap 2）。有一个类似的问题是使用下拉按钮此处，但是答案是在bootstrap中的一个固有的bug，它在更新中解决。

I am having an issue with the Bootstrap menu dropdowns on mobile devices (Bootstrap 2). A similar question was asked here with dropdown buttons, however the answer for that was an inherent bug within bootstrap which was solved in an update. I appear to be having the same issue so perhaps it's down to my markup?

我有一个可折叠的导航条，带有下拉列表，一切都可以在桌面浏览器上正常工作。不过，在移动设备上，当您点击下拉菜单时，下拉菜单将会打开，但点击任何下拉菜单只会将下拉菜单重新放回 - 无法访问链接。我试过各种bootstrap版本，不能纠正这个，所以我只能想象这是我的标记。这是：

I have a collapsable navbar with dropdowns and everything works perfectly on desktop browsers. However on a mobile, the dropdowns will open up when you click on the dropdown but clicking any dropdown links will just fold the dropdown back up again — the links cannot be reached. I have tried various bootstrap versions and cannot correct this so I can only imagine it is my markup. Here it is:

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

Here's an example replicating the code (sorry, can't send the site): http://jsfiddle.net/yDjw8/1/

（问题只能在移动设备上查看/复制 - 我使用的是iOS）

(Problem can only be seen/replicated on mobile — I'm using iOS)

任何帮助将非常感激。

推荐答案

在您的minified bootstrap.min.js文件中，找到子串

In your minified bootstrap.min.js file, find the substring

"ontouchstart"

并替换为

"disable-ontouchstart"

查看这个类似的问题：
Bootstrap Collapsed Menu Links Not Working on Mobile设备

Check out this similiar SO question: Bootstrap Collapsed Menu Links Not Working on Mobile Devices

这篇关于Bootstrap v2下拉导航在移动浏览器上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！