iPad上的Bootstrap 3 Dropdown无法正常工作

Question

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

我认为这是ontouchstart的一个问题,正如其他一些关于Bootstrap 2的帖子中所建议的那样,但是我尝试使用本地文件并且没有成功: Bootstrap折叠菜单链接不适用于移动设备

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

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

这是在未来链接死亡的情况下bootply中的原始代码:

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

Answer 1

我想到了.我在锚标签中缺少href ="#".它在其他浏览器中运行良好,但在IOS上没有chrome或safari.现在工作正常.以下是对任何感兴趣的人的最终代码:

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

这里有一个工作样本:http: //www.bootply.com/104147

Answer 2

如果您不想使用<a>标记或添加冗余href属性,您只需将cursor:pointercss应用于该元素,它就可以工作

Answer 3

我们在iOS上测试的safari版本不能正确解释z-index初始化.在下拉菜单中增加z-index.它不是点击该项目,而是隐藏,菜单关闭.为了使Safari工作,我们需要覆盖bootstrap z-index:initial.

.dropdown-menu {
  z-index: 25000 !important;
}