iPad上的Bootstrap 3下拉菜单不起作用

Question

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

我认为这是 ontouchstart 的问题，正如其他一些处理 Bootstrap 2 的帖子中所建议的那样，但我已经尝试使用本地文件并没有成功： Bootstrap Collapsed Menu Links Not Working on Mobile Devices

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

我在这里创建了一个简单的 sn-p 来测试： 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

引导目标切换在 iPhone/iPad WebKit 上对我不起作用。单击下拉容器时，我最终手动切换了显示类

  $scope.showDropdown = function(dropdownManuId) {
    var element = document.getElementById(dropdownManuId);
    if( element.classList.contains("show") ) {
      element.classList.remove("show");
    } else {
      element.classList.add("show");
      element.focus();
      element.scrollIntoView();
    }
  };

Answer 2

我们在 iOS 上测试的 safari 版本不能正确解释 z-index 初始值。增加下拉菜单上的 z-index。而不是单击该项目，它被隐藏并且菜单关闭。为了让 Safari 正常工作，我们需要覆盖 bootstrap z-index: initial。

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

Answer 3

我刚刚遇到了这个问题 - 在 iPad mini 2 上没有打开 Bootstrap 3 导航栏下拉菜单（但在 iPhone 7 和各种台式机/笔记本电脑上工作）。直接在 iPad 上调试后，我发现问题是在 js 函数中使用 'let' 而不是 'var'。一旦我将 'let's 切换到 'var'，一切都很好。只是想在此处添加它，以防它（或删除类似的过时功能）被证明也是对其他人的修复！

Answer 4

您还可以为您的标签添加一个名为 clickable 的类。这是一个引导类。它设置 css 光标：指针。

<a class="clickable"></a>

Answer 5

如果你不想使用<a>标签，或者添加多余的href属性，你可以将cursor:pointer css应用于元素，它会起作用

Answer 6

我想通了。我的锚标记中缺少 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