html - 如何创建 Bootstrap 3 导航栏，其 entire.navbar-header 在 iOS 6/7 上是可点击的？

Question

我拿了 vanilla Bootstrap3 Navbar 示例:( http://getbootstrap.com/components/#navbar ) 并扔在这里:JSBin

我所做的一个编辑是移动

data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"

从 button.navbar-toggle 到 div.navbar-header

生成的 div.navbar-header 看起来像:

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  <button type="button" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

这在 chrome/firefox 上运行良好，虽然我还没有尝试任何 IE 测试，但它的桌面版本工作并不重要，因为重点是导航栏标题只显示在移动设备上。它在我的 Android 4.4.2/Chrome 34 上运行良好。

我遇到的问题是仅 anchor 标记(a.navbar-brand)和按钮(button.nav-bar -toggle) 在 iOS 上实际上是可点击的(我在 iOS 6.1 和 7.1 上测试过)。

是否有更聪明/更可靠的方法使整个 div.navbar-header 可点击？

编辑 这似乎是一个 iOS 错误，解决方法是简单地将“cursor: pointer”添加到 div。 navbar-header 我在下面有一个完整的答案/示例。

Answer 1

我找到了一份 jQuery 错误报告，其中缺少解决此 iOS 问题的方法:http://bugs.jquery.com/ticket/5677

将 style="cursor:pointer" 添加到 div.navbar-header 修复了 onClick 事件问题。

生成的代码如下所示:

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="cursor:pointer">
  <button type="button" class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

这是更新后的 JSBin:Working JSBin Example