当前位置: 首页 > 面试题库 >

Bootstrap v2下拉导航在移动浏览器上不起作用

常源
2023-03-14
问题内容

我在移动设备(Bootstrap2)上的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>

这是复制代码的示例(抱歉,无法发送网站)

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

任何帮助将非常感激。


问题答案:

在缩小的bootstrap.min.js文件中,找到子html" target="_blank">字符串

"ontouchstart"

并替换为

"disable-ontouchstart"


 类似资料:
  • 我不知道我在这里做错了什么,但我的nav在safari上并不坚持在购物车的顶部,有时它在其他浏览器上也不工作,我真的不明白是怎么回事。我试过定位导航,但没有一个是无效的。希望有人能帮助我理解这里的问题。提前道谢。

  • 问题内容: 在iPhone / iPad / iPod上的Webkit中,点击元素时不会触发为标签的:active伪类指定样式。我该如何触发?示例代码: 问题答案: … 仅应用了一次,而不是每个按钮元素都可以修复页面上的所有按钮。另外,您可以使用这个名为’Fastclick’的小型JS库。它可以加快触摸设备上的点击事件,也可以解决此问题。

  • 问题内容: 如何使元素位置固定在 移动浏览器(iOS和Android)中 ?元素仍在ios <5和android <4中使用以下代码滚动 问题答案: 在大多数的旧版本中不工作和。我已经在大多数移动浏览器中尝试了此修复程序,并且没有任何插件即可正常运行。 采用

  • 我试图打开应用程序(数字钱包应用程序)直接从网络浏览器(如果是移动)。 我已经提到了以下链接 在Android浏览器中创建链接启动我的应用程序? 从android浏览器启动自定义android应用程序 为您提供信息,我正在努力将支付网关(数字钱包)集成到我的网站中,该网站有一种类似二维码(扫描和支付)的支付类型,另一种是deep app link,所以我正在实施的是,如果是网站,则支付类型将是二维

  • 问题内容: 我在使用SWT浏览器组件时遇到了一些麻烦。我正在运行带有Sun的Java SE 1.6的Ubuntu 11.04 AMD64和Eclipse 3.7 我的问题是我的浏览器无法初始化。当我使用SWT.NONE标志实现时,出现错误 然后当我尝试使用SWT.MOZILLA标志时,我得到 我怀疑这部分是因为我正在使用XULRunner2,但是我更喜欢使用WebKit,在Eclipse 3.7中

  • 问题内容: alert(myVar1); return false; var myVar1; 上面的代码在IE,FF和Opera中引发错误,表明return语句必须包含在函数中。但它可以在Safari和Chrome中运行(显示)。 以上代码已在全局范围内编写。以外的所有功能。 任何原因? 问题答案: 在javaScript中,将变量移到脚本顶部,然后运行。所以当你运行它会做 这是因为javascr