javascript - Bootstrap v2 下拉导航不适用于移动浏览器

标签 javascript html css responsive-design twitter-bootstrap-2

我在移动设备 (Bootstrap 2) 上使用 Bootstrap 菜单下拉菜单时遇到问题。问了一个类似的问题here带有下拉按钮,但是答案是 Bootstrap 中的固有错误,已在更新中解决。我似乎遇到了同样的问题,所以这可能取决于我的标记?

我有一个带有下拉菜单的可折叠导航栏,一切都在桌面浏览器上完美运行。但是在移动设备上,当您单击下拉菜单时,下拉菜单将打开,但单击任何下 zipper 接只会再次将下拉菜单折叠起来——无法访问链接。我尝试了各种 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)

如有任何帮助,我们将不胜感激。

最佳答案

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

"ontouchstart"

并将其替换为

"disable-ontouchstart"

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

关于javascript - Bootstrap v2 下拉导航不适用于移动浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17178606/

相关文章:

html - 如何制作右列在容器外部的两列布局?

html - 在两个垂直放置的 div 之间画一条垂直线 - CSS?

javascript - 暂停交替的 css 动画并返回到它的原点

javascript - 我可以替换标准 DOM 函数(如removeChild)吗?

Javascript 将字符串转换为日期格式 yyyy-MM-dd

javascript - 如何将 csv 文件中的数据加载到表单字段中?

javascript - 在后台提交表单

javascript - typescript 中的对象解构

javascript - mmenu 不工作,看起来像普通的 html

php - wordpress 页脚不在 footer.php 中