iPad 上的 Bootstrap 3 Dropdown 不起作用 [英] Bootstrap 3 Dropdown on iPad not working

问题描述

我有一个简单的 Bootstrap 3 下拉菜单，它可以在我测试过的所有浏览器(Chrome、FF、IE、Android 上的 Chrome)中运行，但它在 iPad 上的 Safari 或 Chrome 中不起作用(ios 7.04).

我认为这是 ontouchstart 的问题，正如其他一些处理 Bootstrap 2 的帖子中所建议的那样，但我已经尝试过使用本地文件并没有成功:引导折叠菜单链接在移动设备上不起作用

我也不想要一个必须修改原始 javascript 文件的解决方案，因为我们目前正在从 CDN 中提取该文件.

我在这里创建了一个简单的片段来测试:https://www.bootply.com/Bdzlt3G36C

这里是 bootply 中的原始代码，以防将来链接失效:

<div class="下拉"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">行动</a><ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction"><li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>行动</a><ul class="dropdown-menu"=""role="menu" aria-labelledby="ddaction"></a><a role="menuitem" tabindex="-1" href="http://www.google.com">打开谷歌</a></ul></div>

解决方案

我想通了.我的锚标记中缺少 href="#" .它在其他浏览器中运行良好，但在 IOS 上无法正常运行 chrome 或 safari.现在工作正常.这是任何感兴趣的人的最终代码:

 
<a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">行动</a><ul class="dropdown-menu" role="menu" aria-labelledby="ddaction"><li role="演示文稿"><a role="menuitem" tabindex="-1" href="http://www.google.com">打开谷歌</a>

这里有一个工作示例:http://www.bootply.com/104147

I have a simple Bootstrap 3 dropdown that is working in all browsers that I've tested (Chrome, FF, IE, Chrome on Android) but it is not working in Safari or Chrome on the iPad (ios 7.04).

I thought this was an issue with the ontouchstart as suggested in some other posts dealing with Bootstrap 2 but I've tried that with a local file and have had no success: Bootstrap Collapsed Menu Links Not Working on Mobile Devices

I also don't want a solution where I have to modify the original javascript file since we're currently pulling that from a CDN.

I created a simple snippet here to test: https://www.bootply.com/Bdzlt3G36C

Here's the original code that's in the bootply in case that link dies in the future:

<div class="col-sm-5 col-offset-2 top-buffer">
  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">
        Action
    </a>
    <ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction">
      <li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>
        Action
    </a>
    <ul class=" dropdown-menu"="" role="menu" aria-labelledby="ddaction">
        </a><a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>

  </ul></div>
</div>

解决方案

I figured it out. I was missing the href="#" in my anchor tag. It was working fine in other browsers but not chrome or safari on IOS. Works fine now. Here's the final code for anyone that's interested:

  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">
        Action
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>
    </ul>
  </div>

And a working sample here: http://www.bootply.com/104147

这篇关于iPad 上的 Bootstrap 3 Dropdown 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！