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

Posted 2023-03-06

【中文标题】iPad上的Bootstrap 3下拉菜单不起作用

【英文标题】：Bootstrap 3 Dropdown on iPad not working

【发布时间】：2014-01-24 11:21:13

【问题描述】：

我有一个简单的 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>

【问题讨论】：

这是个好问题。它不应该被关闭：它可以被复制而且几乎不是一个错字。这是各种帖子的棘手问题，但代码是一个简洁的例子，问题包括他已经尝试过的东西，答案涵盖了几种可能的解决方案。

【参考方案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();
    
  ;

【参考方案2】：

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

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

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

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

【讨论】：

这完全没有意义，但它解决了问题.. iOS 调试很有趣！充满惊喜:)

是的.. 我简直不敢相信这解决了我的问题。浏览器太疯狂了。

很奇怪——但这也解决了我在第三方 Wordpress 主题上的引导菜单问题，只需添加 'cusor:pointer' 就可以让 iPhone 响应单击汉堡菜单某些原因。谢谢马克！

【参考方案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

【讨论】：

顺便说一下，我添加了一些按钮类 (btn btn-sm) - 对我有用（而且我不必使用具有潜在副作用的链接，例如滚动）

这节省了一天的时间。我看到很多例子都省略了 href="#" 并且延续到了最新的项目中。感谢发帖！

这是一个救命稻草，就像本教程从未有过 href 的 @ChristopherStevens 一样

这也是 iPhoneX/Safari 11 的 Bootstrap4 中的一个问题。添加href="#" 仍然有效！

我发现有 href="" 就足够了，尽管我的 <a> 中有 angularjs ng-clicks