Bootstrap v2 下拉导航不适用于移动浏览器 [英] Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

问题描述

我在使用移动设备(Bootstrap 2)上的 Bootstrap 菜单下拉菜单时遇到问题.使用下拉按钮在此处提出了类似的问题，但是对此的答案是引导程序中的一个固有错误，该错误已在更新中解决.我似乎遇到了同样的问题，所以可能是我的标记造成的?

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

 
<div class="navbar-inner"><div class="容器"><a href="#"><h1>品牌</h1></a><button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">菜单</button><div class="nav-collapse collapse"><ul class="nav"><li><a href="#">菜单项 1</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">菜单项 2(下拉)<b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">下拉项目 1</a></li><li><a href="#">下拉项目 2</a></li><li><a href="#">下拉项目 3</a></li><li><a href="#">下拉项目 4</a></li><li><a href="#">菜单项 3</a></li><li><a href="#">菜单项 4</a></li></div><!--/.nav-collapse -->

</标题>

这是复制代码的示例(抱歉，无法发送站点):http://jsfiddle.net/yDjw8/1/

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

任何帮助将不胜感激.

解决方案

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

"ontouchstart"

并将其替换为

"disable-ontouchstart"

看看这个类似的问题:引导折叠菜单链接在移动设备上不起作用

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?

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>

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

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

Any help would be much appreciated.

解决方案

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

"ontouchstart"

and replace it with

"disable-ontouchstart"

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

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