Bootstrap nav-collapse 链接在移动设备上不起作用

Question

我遇到一个问题，就是下拉菜单无法在移动设备上运行，我为此苦苦挣扎了一周。我从引导站点获取了当前示例的副本，对其进行了一些修改，在测试期间我注意到它没有按预期工作。 （对于原始示例（http://twitter.github.io/bootstrap/examples/carousel.html）也是如此，我只添加了一个指向例如 google 的链接） - 为什么会出现这种行为？

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="#">Dropdown test</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Links<span class="caret"></span></a>       
            <ul class="dropdown-menu">
              <li><a href="http://www.google.com" target="blank">Google (opens in new window)</a></li>
              <li><a href="http://www.bing.com" target="blank">Bing (opens in new window)</a></li>
              <li><a class="linkcheck" href="http://www.google.com">Google</a></li>
              <li><a class="linkcheck" href="http://www.bing.com">Bing</a></li>
            </ul>
          </li><!-- .dropdown -->
        </ul><!-- .nav -->
      </div><!-- .nav-collapse -->
    </div><!-- .container -->
  </div><!-- .navbar-inner -->
</div><!-- .navbar -->

Bootstrap 对我来说是新的，我找不到任何关于 nav-collapse 的文档，我在哪里可以找到这个？ 我真的必须做一个点击事件，然后是window.open（url）吗？ （或者 onclick 在移动设备上的行为是否不同？）

这是我的在线示例：http://test-web.dk/sandbox/bootstrap/

编辑： 找到了解决方案：

$('.linkcheck', this).click(function(){
  var url = $(this).attr('href');
  alert("link clicked:" + url);
  if(url.match(/^http:/)) {
    window.location.href = url;
  }
});

// fix by RobDodson: github.com/twitter/bootstrap/issues/4550
// Kills regular links in browsers though, but they will be redirected by linkcheck above
$('.dropdown a').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});

不过，一个真正的引导解决方案会很高兴知道，而不是 hack :-) 所以如果有人有建议，请发表。

Answer 1

检查您使用的是最新的 jQuery。

我在 Drupal 的 Bootstrap 主题上遇到了同样的问题，但是通过将 jQuery Update 中的设置更改为最新的来解决这个问题！