title: Bootstrap nav-collapse links not working on mobile
body: <p>I'm having a problem regarding dropdown menus not working on mobile devices that i've been struggling with for a week. I've taken a copy of the current example from the bootstrap site, modified it a bit and during the test i noticed it didn't work as expected. (same goes for the original example(<a href="http://twitter.github.io/bootstrap/examples/carousel.html" rel="nofollow">http://twitter.github.io/bootstrap/examples/carousel.html</a>), where i only add a link to for instance google) - why this behaviour? </p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="brand" href="#"&gt;Dropdown test&lt;/a&gt;
        &lt;div class="nav-collapse collapse"&gt;
          &lt;ul class="nav"&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#"&gt;Links&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;       
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="http://www.google.com" target="blank"&gt;Google (opens in new window)&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://www.bing.com" target="blank"&gt;Bing (opens in new window)&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="linkcheck" href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="linkcheck" href="http://www.bing.com"&gt;Bing&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;&lt;!-- .dropdown --&gt;
          &lt;/ul&gt;&lt;!-- .nav --&gt;
        &lt;/div&gt;&lt;!-- .nav-collapse --&gt;
      &lt;/div&gt;&lt;!-- .container --&gt;
    &lt;/div&gt;&lt;!-- .navbar-inner --&gt;
  &lt;/div&gt;&lt;!-- .navbar --&gt;
  </code></pre>
  
  <p>Bootstrap is new to me, and i can't find any documentation on nav-collapse, where can i find this? 
  And do i really have to do a click event, then window.open(url)? (or does onclick behave different on a mobile device?)</p>
  
  <p>Here's my online example: <a href="http://test-web.dk/sandbox/bootstrap/" rel="nofollow">http://test-web.dk/sandbox/bootstrap/</a> </p>
  
  <p>Edit: 
  Found a solution:</p>
  
  <pre><code>$('.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);
  });
  </code></pre>
  
  <p>Still, a real bootstrap solution would be nice to known, rather than a hack :-) So if anybody has a suggestion, please post it.</p>